Kommentar: Ein einzigartiges CSS, das in Webkit einzigartig ist, kann den Textstil steuern. Mit den Animationseffekten und der Pseudo-Kategorie von CSS3 können wir problemlos ein Animations-Eingabefeld erstellen, das sehr für Systemanmeldungen, Suche usw. geeignet ist. Wenn Sie interessiert sind, können Sie sich auf den folgenden Artikel verweisen oder Ihnen helfen.
Ich habe lange Zeit keinen technischen Artikel geschrieben. Ich habe in letzter Zeit Webkit als Träger verwendet. Natürlich muss ich HTML5 und CSS3 in großen Mengen verwenden, was nicht nur viele JS reduziert, sondern auch glatter ist.Wenn das Dialogfeld ausgewählt ist, wird der Eingabeaufforderungstext leichter und verschwindet nach der Eingabe. Die aktuelle Praxis besteht darin, ein Etikett hinter dem Eingangs -Tag hinzuzufügen. Verwenden Sie JS Control.
Nachdem HTML5 erscheint, haben wir einen besseren Ansatz.
<Eingabe type = "text" placeholder = "Benutzername oder E -Mail -Adresse"/>
Wir sehen, dass es ein Platzhalter -Tag gibt, das als Benutzerintextaufforderung verwendet werden kann. Das ist sehr bequem. Um die beste Perfektion zu erzielen, müssen wir den Text nach der Auswahl aufhellen oder den Stil der Eingabeaufforderungsdatei ändern. Was sollen wir tun?
input ::-Webkit-Input-Place-Helder {
Farbe: #999;
-Webkit-Übergang: Farbe.5s;
}
Eingabe: Focus ::-Webkit-Input-Place-Helder, Eingabe: Hover ::-Webkit-Input-PlaceHolder {
Farbe: #C2C2C2;
-Webkit-Übergang: Farbe.5s;
}
-Webkit-Input-Platzhalter, ein einzigartiges CSS, das für Webkit einzigartig ist, kann den Textstil im Inneren steuern. Mit den Animationseffekten und Pseudoklassen von CSS3 können wir problemlos ein Animations-Eingabefeld erstellen, das für Systemanmeldungen, Suche und andere Standorte sehr geeignet ist. Natürlich funktioniert diese Methode nicht, um mit IE6 kompatibel zu sein. IE9 unterstützt jedoch auch das Platzhalter -Tag, seine Farbe kann jedoch nicht geändert werden.
Was soll ich tun, wenn es nicht unterstützt wird? Sie können einfach JQuery verwenden, um zu helfen, sodass es nicht im Rahmen dieses Artikels liegt.
Geben Sie eine Demo an, und die Demo -Adresse muss im Webkit -Browser sein, um den vollständigen Effekt zu sehen. Ist es nicht sehr bequem?