Jak stworzyć: animowany pasek wyszukiwania

Naucz się, jak używać CSS do tworzenia animowanych formularzy wyszukiwania.

Kliknij pole wejściowe:

Jak stworzyć animowany pasek wyszukiwania

Krok 1 - Dodaj HTML:

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

Krok 2 - Dodaj CSS:

input[type=text] {
  szerokość: 130px;
  -webkit-transition: szerokość 0.4s ease-in-out;
  transition: szerokość 0.4s ease-in-out;
}
/* Kiedy pole wejściowe uzyskuje fokus, zmienia jego szerokość na 100% */
input[type=text]:focus {
  szerokość: 100%;
}

Spróbuj sam

Strony związane

Tutorial:Formularz HTML

Tutorial:Formularz CSS