Come creare: casella di ricerca animata

Impara come utilizzare CSS per creare un modulo di ricerca animato.

Clicca sul campo di input:

Come creare una casella di ricerca animata

Primo passo - Aggiungi HTML:

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

Secondo passo - Aggiungi CSS:

input[type=text] {
  larghezza: 130px;
  -webkit-transizione: larghezza 0.4s ease-in-out;
  transizione: larghezza 0.4s ease-in-out;
}
/* Quando il campo di input ottiene il focus, cambia la sua larghezza al 100% */
input[type=text]:focus {
  larghezza: 100%;
}

Prova tu stesso

Pagine correlate

Tutorial:Formulario HTML

Tutorial:Formulario CSS