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