How TO - Geanimeerd zoekformulier
Leer hoe u een geanimeerd zoekformulier maakt met CSS.
Een geanimeerd zoekformulier maken
Klik op het invoerveld:
Stap 1) HTML toevoegen:
Voorbeeld
<input type="text" name="search" placeholder="Search..">
Stap 2) CSS toevoegen:
Voorbeeld
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%;
}
Tip: Ga naar onze HTML-formulierhandleiding voor meer informatie over HTML-formulieren.
Ga naar onze CSS Forms Tutorial voor meer informatie over het stylen van HTML Forms.