Jak to zrobić — animowany formularz wyszukiwania
Dowiedz się, jak utworzyć animowany formularz wyszukiwania za pomocą CSS.
Jak stworzyć animowany formularz wyszukiwania
Kliknij pole wejściowe:
Krok 1) Dodaj kod HTML:
Przykład
<input type="text" name="search" placeholder="Search..">
Krok 2) Dodaj CSS:
Przykład
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%;
}
Wskazówka: przejdź do naszego samouczka dotyczącego formularzy HTML , aby dowiedzieć się więcej o formularzach HTML.
Przejdź do naszego samouczka formularzy CSS , aby dowiedzieć się więcej o stylizacji formularzy HTML.