Анимированная форма поиска

  alexei 14/01/2023 - 09:15

Здесь вы узнаете как сделать анимированную форму поиска при помощи 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%;
}