Changer la couleur d'un input texte de l'attribut HTML5 placeholder en CSS
Pour prendre en charge toutes les propriétés, il faudra utiliser un sélecteur à la fois car si l'on regroupe tous les sélecteurs, cela ne fonctionnera pas.
L'attribut placeholder est utilisé en JavaScript sur les champs. Il précise un texte affiché dans ce champ qui est supprimé dès que l'on sélectionne le champ pour saisir le texte. Il est possible de modifier le style de cet attribut en CSS.
L'attribut placeholder provient de la norme HTML5. Il est interprété différemment par les navigateurs. Et le sélecteur CSS à utiliser pour sélectionner l'attribut diffère également selon le navigateur.
Pour les moteurs de rendu Blink et Webit, le sélecteur CSS à utiliser est le pseudo-élément ::-webkit-input-placeholder. L'attribut est supporté par les navigateurs Safari et Chrome depuis leur version 3, Opera depuis la version 15 et Microsoft Edge.
Pour Mozilla Firefox, l'attribut placeholder est supporté depuis la version 4. Jusqu'à la version 18, on utilisait comme sélecteur la pseudo-classe :-moz-placeholder. Depuis la version 19, il faut utiliser un pseudo-élément : ::-moz-placeholder. De plus, un problème de contraste avec le rendu de la propriété est parfois constaté sur le navigateur. Si le texte n'est pas assez visible, ajoutez la propriété opacity: 1 dans la feuille de style CSS.
Internet Explorer supporte l'attribut placeholder dans les versions 10 et 11. Pour modifier le style, il faut indiquer dans la feuille de style la pseudo-classe :-ms-input-placeholder.
Pour prendre en charge toutes les propriétés, il faudra utiliser un sélecteur à la fois car si l'on regroupe tous les sélecteurs, cela ne fonctionnera pas. En effet, un navigateur n'interprète pas un groupe de sélecteurs s'il considère l'un d'entre eux comme invalide.
::-webkit-input-placeholder /* WebKit, Blink, Edge */
{
color: #F00;
}
:-moz-placeholder /* Mozilla Firefox 4 à 18 */
{
color: #F00;
opacity: 1;
}
::-moz-placeholder /* Mozilla Firefox à partir de la version 19 */
{
color: #F00;
opacity: 1;
}
:-ms-input-placeholder /* Internet Explorer 10-11 */
{
color: #F00;
}
<input placeholder=Saisissez du texte dans ce champ>
Certains navigateurs supportent des types supplémentaires pour un champ texte (email, search) qui peuvent affecter le rendu de l'attribut placeholder. Pour restaurer une apparence normale pour ces champs, il faut modifier les propriétés appareance, -webkit-appearance et -moz-appearance et leur donner comme valeur textfield, ce qui correspond à l'apparence d'un champ texte par défaut.
input[type=search]
{
-moz-appearance: textfield;
-webkit-appearance: textfield;
appearance: textfield;
}