Как подвинуть в данном случаи border у input?

Question

[freeman0204]

codepen.io/freeman0204/pen/rLxJvW это поиск который открывается когда на нем фокус. У инпута есть бордер нижний, мне нужно его переставить немного в другое место но что бы он также анимировался. Как это можно сделать?

Answer 1

[Роман Татаринов]

немного в другое, это в какое?
Вы можете к примеру добавить padding-bottom: 10px, следовательно border будет ниже на 10px

Comments

[freeman0204]

Хочу подвинуть бордер влево и вверх. Отступы не помогают а с position двигается сам инпут. А у интупа есть фон. И получается все вместе двигается. Мне нужно двигать бордер отдельно.

[devstudent]

а почему не поставить вместо нижнего бордера верхний, если вверх надо передвинуть

Answer 2

[Артем Лучин]

input[type=search] {
	width: 36px;
  /*height: 36px;*/
  padding: 10px 0 2px 10px; // добавить эту строку и поиграться как хочется
  backnd: red;
  margin: 0 30px 0 40px;
	transition: all .5s;
  position: relative;
}

Если я правильно понял то, чего вы добиваетесь.