Placeholder css couleur/color

Nous nous sommes tous en tant que développeur ou intégrateur demandés comment modifier la couleur des placeholder, vous savez, ces textes présents dans les champs de formulaire pour aider nos chers internautes à les remplir.

Voici comment sont les placeholder de mon formulaire de contact :

INFORMATUX placeholder formulaire contact

Vous pouvez voir qu'ils sont en gris clair (ex: Entrer votre nom ici, Entrer votre sujet ici, ...)

Imaginons que nous souhaitions les mettre en rouge et en italique, cela donnerais ceci :

INFORMATUX placeholder formulaire modifié

Et bien voilà comment vous pouvez procéder en CSS pour modifier le style (couleur, graisse, ...) de vos placeholder de formulaire :

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
	color: red;
	font-style: italic;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	color: red;
	opacity:  1;
	font-style: italic;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
	color: red;
	opacity:  1;
	font-style: italic;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
	color: red;
	font-style: italic;
}
::-ms-input-placeholder { /* Microsoft Edge */
	color: red;
	font-style: italic;
}

 

Bon surf ;-)

blog comments powered by Disqus