Здесь вы узнаете как сделать анимированную форму поиска при помощи CSS.
Как сделать анимированную форму поиска
Кликните на поле ввода:
Шаг 1) Добавляем HTML:
Пример
<input type="text" name="search" placeholder="Поиск..">
Шаг 2) Добавляем CSS:
Пример
input[type=text] {
width: 130px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
/* Когда поле ввода получает фокус, ее ширина изменяется до значения 100% */
input[type=text]:focus {
width: 100%;
}
