Commentaire: Un CSS unique unique à WebKit peut contrôler le style de texte. Avec les effets d'animation et la pseudo-catégorie de CSS3, nous pouvons facilement créer une boîte d'entrée d'animation, qui est très adaptée à la connexion du système, à la recherche, etc. Si vous êtes intéressé, vous pouvez vous référer à l'article suivant ou vous aider.
Je n'ai pas écrit d'article technique depuis longtemps. J'utilise WebKit comme opérateur récemment. Bien sûr, j'ai besoin d'utiliser HTML5 et CSS3 en grande quantité, ce qui réduit non seulement beaucoup de JS, mais assure également plus fluide.Lorsque la boîte de dialogue est sélectionnée, le texte de l'invite deviendra plus léger et disparaîtra après l'entrée. La pratique actuelle consiste à ajouter une étiquette derrière la balise d'entrée. Utilisez JS Control.
Une fois HTML5, nous avons une meilleure approche.
<entrée type = "text" placeholder = "nom d'utilisateur ou adresse e-mail" />
Nous voyons qu'il existe une balise d'espace réservé qui peut être utilisée comme invite de texte d'un utilisateur. C'est très pratique. Mais pour obtenir la meilleure perfection, nous devons alléger le texte après l'avoir sélectionné ou modifier le style du fichier invite. Que devons-nous faire?
entrée :: - webkit-int-placeholder {
Couleur: # 999;
-Webkit-Transition: Color.5s;
}
Entrée: Focus :: - Webkit-Input-placeholder, entrée: Hover :: - Webkit-Input-placeholder {
Couleur: # C2C2C2;
-Webkit-Transition: Color.5s;
}
-Webkit-Input-placeholder, un CSS unique unique à WebKit, peut contrôler le style de texte à l'intérieur. Avec les effets d'animation et les pseudo-classes de CSS3, nous pouvons facilement créer une boîte d'entrée d'animation, qui est très adaptée à la connexion du système, à la recherche et à d'autres emplacements. Bien sûr, cette méthode ne fonctionnera pas pour être compatible avec IE6. Cependant, IE9 prend également en charge l'étiquette d'espace réservé, mais sa couleur ne peut pas être modifiée.
Alors, que dois-je faire s'il n'est pas pris en charge? Vous pouvez simplement utiliser jQuery pour vous aider, donc ce n'est pas dans le cadre de cet article.
Donnez une démo, et l'adresse de démonstration doit être dans le navigateur WebKit pour voir le plein effet. N'est-ce pas très pratique?