Sådan oprettes: en animéret søgefelt

Lær at bruge CSS til at oprette en animéret søgeformular.

Klik på inputfeltet:

Sådan oprettes en animéret søgefelt

Andet trin - Tilføj HTML:

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

Første trin - Tilføj CSS:

input[type=text] {
  width: 130px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}
/* Når inputfeltet får fokus, ændres dens bredde til 100% */
input[type=text]:focus {
  width: 100%;
}

Prøv det selv

Relaterede sider

Tutorial:HTML formular

Tutorial:CSS formular