Comment créer : une boîte de recherche animée

Apprenez à utiliser CSS pour créer un formulaire de recherche animé.

Cliquez sur le champ d'entrée :

Comment créer une boîte de recherche animée

Première étape - Ajouter HTML :

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

Deuxième étape - Ajouter CSS :

input[type=text] {
  width: 130px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}
/* 当输入字段获得焦点时，将其宽度更改为 100% */
input[type=text]:focus {
  width: 100%;
}

Essayer par vous-même

Pages liées

Tutoriel :Formulaire HTML

Tutoriel :Formulaire CSS