Hur man skapar: en animerad sökfält

Lär dig hur man använder CSS för att skapa en animerad sökformulär.

Klicka på inmatningsfältet:

Hur man skapar en animerad sökfält

Steg 1 - Lägg till HTML:

<input type="text" name="search" placeholder="Sök..">

Steg 2 - Lägg till CSS:

input[type=text] {
  width: 130px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}
/* När inmatningsfältet får fokus, ändra dess bredd till 100% */
input[type=text]:focus {
  width: 100%;
}

Prova själv

Relaterade sidor

Tutorials:HTML-formulär

Tutorials:CSS-formulär