How TO - Modulo di ricerca animato
Scopri come creare un modulo di ricerca animato con CSS.
Come creare un modulo di ricerca animato
Clicca sul campo di inserimento:
Passaggio 1) Aggiungi HTML:
Esempio
<input type="text" name="search" placeholder="Search..">
Passaggio 2) Aggiungi 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%;
}
Suggerimento: vai al nostro Tutorial per moduli HTML per saperne di più sui moduli HTML.
Vai al nostro tutorial sui moduli CSS per saperne di più su come applicare uno stile ai moduli HTML.