Как создать: анимационное поле поиска

Учимся, как использовать CSS для создания анимационной формы поиска.

нажмите на поле ввода:

Как создать анимационное поле поиска

первый шаг - добавить HTML:

<input type="text" name="search" placeholder="Search..">

второй шаг - добавить CSS:

input[type=text] {
  ширина: 130px;
  -webkit-транзит: ширина 0.4с легкость-входа-выхода;
  транзит: ширина 0.4с легкость-входа-выхода;
}
/* При получении фокуса поля ввода измените его ширину на 100% */
input[type=text]:focus {
  ширина: 100%;
}

Попробуйте сами

Соответствующие страницы

Учебник:HTML форма

Учебник:CSS форма