Apprenez à créer un formulaire de recherche animé avec CSS.
Comment faire pour créer un formulaire de recherche d'animation
Cliquez sur le champ de saisie:
Étape 1) Ajouter HTML:
Exemple
<input type="text" name="search" placeholder="Search..">Étape 2) Ajouter 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%;
} Essayez vous - même » Accédez à notre CSS Forms Tutorial pour en savoir plus sur la façon de style des formulaires HTML.