h5 et CSS3 créent une zone de saisie avec un texte d'invite

Un CSS unique à WebKit qui peut contrôler le style du texte à l'intérieur. Avec les effets d'animation et les pseudo-classes de CSS3, nous pouvons facilement créer une zone de saisie animée, ce qui est très approprié pour la connexion au système, la recherche, etc. êtes intéressés, vous pouvez vous référer à cet article, qui pourra peut-être vous aider. Je n'ai pas écrit d'article technique depuis longtemps. Récemment, j'ai développé un système utilisant Webkit comme support. Bien sûr, je dois utiliser beaucoup de HTML5 et de CSS3, ce qui réduit non seulement beaucoup de JS mais aussi. assure un développement plus fluide.

Lorsque la boîte de dialogue est sélectionnée, le texte de l'invite devient plus clair et disparaît après la saisie. La pratique courante consiste désormais à ajouter une étiquette après le Étiquette de saisie . Utilisez le contrôle JS.
Après la sortie du HTML5, nous avons une meilleure solution.

Le code est le suivant :

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

Nous voyons qu'il existe une balise d'espace réservé, qui peut être utilisée comme invite de texte utilisateur. C'est très pratique. Mais pour être le plus parfait, nous devons alléger le texte ou modifier le style du fichier d'invite après l'avoir sélectionné. Que devons-nous faire ?

Le code est le suivant :

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, un CSS unique à webkit, qui peut contrôler le style du texte à l'intérieur et coopérer avec les effets d'animation et des pseudo-classes de CSS3 Nous pouvons facilement créer une zone de saisie animée, adaptée à la connexion au système, à la recherche, etc. Bien entendu, si vous souhaitez être compatible avec IE6, cette méthode ne fonctionnera pas. Cependant, Ie9 prend également en charge les balises 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, cela dépasse donc le cadre de cet article.
Donnez-moi une démo. L'adresse de démonstration doit être utilisée dans un navigateur Webkit pour voir le plein effet. N'est-ce pas très pratique ?

【Recommandations associées】

1. Tutoriel vidéo gratuit CSS3

2 Partagez plusieurs derniers attributs CSS3 couramment utilisés<.>

Utilisez CSS pour créer de petits coins pointus et des effets de bulles dans la boîte de discussion

Le navigateur implémente une animation CSS3 haute performance sur. le côté mobile

exemple de code h5+css3 pour implémenter un effet de survol d'image et de fondu

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!