Scopri come creare un modulo di ricerca animata con i CSS.
Come creare un modulo di ricerca animato
Fare clic sul campo di immissione:
Fase 1) Aggiungere HTML:
Esempio
<input type="text" name="search" placeholder="Search..">Punto 2) Aggiungere CSS:
Esempio
.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%;
} Prova tu stesso " Vai al nostro CSS Forms Tutorial per imparare di più su come lo stile moduli HTML.