h5 und CSS3 erstellen ein Eingabefeld mit Eingabeaufforderungstext

Ein für WebKit einzigartiges CSS, das den Textstil im Inneren steuern kann. Mit den Animationseffekten und Pseudoklassen von CSS3 können wir ganz einfach ein animiertes Eingabefeld erstellen, das sich sehr gut für die Systemanmeldung, Suche usw. eignet Wenn Sie interessiert sind, können Sie sich auf diesen Artikel beziehen, der Ihnen weiterhelfen kann. Ich habe schon lange keinen technischen Artikel mehr geschrieben, da ich in letzter Zeit ein System mit Webkit als Träger entwickelt habe. Natürlich muss ich viel HTML5 und CSS3 verwenden, was nicht nur viel JS reduziert sorgt für eine reibungslosere Entwicklung.

Wenn das Dialogfeld ausgewählt ist, wird der Eingabeaufforderungstext heller und verschwindet nach der Eingabe. Die übliche Praxis besteht jetzt darin, nach der Eingabebezeichnung eine Beschriftung hinzuzufügen. Verwenden Sie die JS-Steuerung.
Nachdem HTML5 herauskommt, haben wir eine bessere Möglichkeit.

Der Code lautet wie folgt:

<input type="text" placeholder="用户名或邮件地址" name="username"/>

Wir sehen, dass es ein Platzhalter-Tag gibt, das als Textaufforderung des Benutzers verwendet werden kann. Das ist sehr praktisch. Um jedoch möglichst perfekt zu sein, müssen wir den Text heller machen oder den Stil der Eingabeaufforderungsdatei ändern, nachdem wir ihn ausgewählt haben.

Der Code lautet wie folgt:

input::-webkit-input-placeholder { 
color: #999; 
-webkit-transition: color.5s; 
} 
input:focus::-webkit-input-placeholder, 
input:hover::-webkit-input-placeholder { 
color: #c2c2c2; 
-webkit-transition: color.5s; 
}

-webkit-input-placeholder, ein für Webkit einzigartiges CSS, das den Textstil im Inneren steuern und mit den Animationseffekten zusammenarbeiten kann und Pseudoklassen von CSS3. Wir können problemlos ein animiertes Eingabefeld erstellen, das sich sehr gut für die Systemanmeldung, Suche usw. eignet. Wenn Sie mit IE6 kompatibel sein möchten, funktioniert diese Methode natürlich nicht. Allerdings unterstützt Ie9 auch Platzhalter-Tags, deren Farbe jedoch nicht geändert werden kann.
Was soll ich also tun, wenn es nicht unterstützt wird? Sie können einfach Jquery als Hilfe verwenden, daher würde dies den Rahmen dieses Artikels sprengen.
Geben Sie mir eine Demo. Die Demo-Adresse muss in einem Webkit-Browser verwendet werden, um den vollen Effekt zu sehen. Ist das nicht sehr praktisch?

【Verwandte Empfehlungen】

1. Kostenloses CSS3-Video-Tutorial

2. Teilen Sie einige häufig verwendete neueste CSS3-Attribute

Verwenden Sie CSS, um kleine scharfe Ecken und Blaseneffekte in der Chatbox zu erstellen

Der Browser implementiert leistungsstarke CSS3-Animationen auf der mobilen Seite

h5+css3-Codebeispiel zur Implementierung des Bild-Fly-In- und Fade-In-Effekts

Das obige ist der detaillierte Inhalt vonh5 und CSS3 erstellen ein Eingabefeld mit Eingabeaufforderungstext. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!