How TO - Animiertes Suchformular
Erfahren Sie, wie Sie mit CSS ein animiertes Suchformular erstellen.
So erstellen Sie ein animiertes Suchformular
Klicken Sie auf das Eingabefeld:
Schritt 1) HTML hinzufügen:
Beispiel
<input type="text" name="search" placeholder="Search..">
Schritt 2) CSS hinzufügen:
Beispiel
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%;
}
Tipp: Besuchen Sie unser HTML-Formular-Tutorial , um mehr über HTML-Formulare zu erfahren.
Gehen Sie zu unserem Tutorial zu CSS-Formularen , um mehr über das Gestalten von HTML-Formularen zu erfahren.