Как сделать анимацию у инпута?

Question

[harly_queen]

Как сделать так, чтобы при нажатии на инпут type="text" его граница(при фокусе) увеличивалась, а потом граница уменьшалась(когда не в фокусе)?
https://www.dropbox.com/s/y01sfnevohlou9g/Untitled...

Answer 1

[Lumore]

Dropbox - 403 error.
Вопрос - непонятен.

Comments

[harly_queen]

поправила ссылку

[Lumore]

harly_queen: codepen.io/anon/pen/JdXZYa

[harly_queen]

Lumore: чуть не то, тут меняется цвет, а должна нижняя граница увеличиваться при фокусе.

[Lumore]

harly_queen: обновил

[harly_queen]

Lumore: почти оно, только у инпута по умолчанию ширина есть(в примере 300px), когда кликаем на инпут он увеличивается до 386px, потом когда не в фокусе опять 300px.Я вот думаю, мб эту границу через :after сделать и ее анимировать?

[Lumore]

harly_queen: можно через box-shadow(inset)

[harly_queen]

Lumore: хмм, как?

[Евгений Конкин]

Lumore: нижние инпуты сдвигаются вниз при фокусе

[Lumore]

harly_queen: честно, не очень понял что вы хотите сделать. Обновил.

[harly_queen]

Lumore: посмотрите внимательно на прикрепленную картинку к посту, как у инпутов происходит анимация.

[Евгений Конкин]

harly_queen: как вариант можно сделать всё как тут — codepen.io/anon/pen/JdXZYa, но загнать всё в блок div заданных размеров и инпуты там разместить как absolute

[harly_queen]

Евгений Конкин: в примере не совсем то

[Евгений Конкин]

harly_queen: вот примерно то, о чем я говорил — codepen.io/konnn/pen/OVNEjN

[harly_queen]

Евгений Конкин: верхние инпуты -это когда в фокусе, по умолчанию они как нижние по ширине, так что не то

[Евгений Конкин]

harly_queen: ааааа! вот Вы о чем, не понял сразу тогда точно надо absolute делать

[harly_queen]

Евгений Конкин: я пробовала к div в котором находится инпут применять scale, но так увеливается граница в обе стороны, а надо вправа у первого инпута, и влево у второго.Как-то так

[Евгений Конкин]

harly_queen: вот пожалуйста, правда немного извращенный код))) — evgenykonkin.ru/input

Answer 2

[Евгений Конкин]

border-bottom увеличился при фокусе?

Comments

[harly_queen]

да, при чем расстояния между самими инпутами не изменяется, изменяется только нижняя граница

[Евгений Конкин]

harly_queen: можно сделать блок div заданных размеров и инпуты там разместить как absolute

[Андрей Гончаров]

box-shadow: 0 2px 0 2px #000 не будет влиять на высоту элемента и расстояние до других элементов

Answer 3

[Евгений]

Можно сделать просто:

input[type="text] {
border: 1px solid #555555;
}
input[type="text]:focus {
border-width: 2px;
}

Но из-за того, что у нас увеличивается высота и ширина объекта на 1px в каждую сторону, он будет прыгать. Поэтому правильным будет каждый input обернуть в слой, установить у этого слоя границу в 1px нужного цвета.
А у input установить границу в 1px такого же цвета, как и background у input, при фокусе же менять цвет границы input. Как это выглядит, смотрите на форме: demo.lp-tricks.com