Hoe te maken: animatie zoekvak

Leer hoe je een animatie zoekformulier kunt maken met CSS.

Klik op het invoerveld:

Hoe een animatie zoekvak te maken

Eerste stap - Voeg HTML toe:

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

Tweede stap - Voeg CSS toe:

input[type=text] {
  width: 130px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}
/* Wanneer het invoerveld de focus krijgt, verandert de breedte in 100% */
input[type=text]:focus {
  width: 100%;
}

Try it yourself

Related pages

Tutorial:HTML form

Tutorial:CSS form