Comment faire - Formulaire de recherche animé
Apprenez à créer un formulaire de recherche animé avec CSS.
Comment créer un formulaire de recherche animé
Cliquez sur le champ de saisie :
Étape 1) Ajoutez du HTML :
Exemple
<input type="text" name="search" placeholder="Search..">
Étape 2) Ajoutez CSS :
Exemple
input[type=text] {
width: 130px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
/* When the input field gets
focus, change its width to 100% */
input[type=text]:focus {
width: 100%;
}
Conseil : Accédez à notre didacticiel sur les formulaires HTML pour en savoir plus sur les formulaires HTML.
Accédez à notre didacticiel sur les formulaires CSS pour en savoir plus sur la façon de styliser les formulaires HTML.