HTML CSS - Placeholder css couleur/color

HTML CSS

[06/11/2017] Placeholder css couleur/color

Formulaire placeholder

Placeholder css couleur/color

Nous nous sommes tous, en tant que développeur ou intégrateur, demandé 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 donnerait 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 ;-)

© 2005 - 2024 • INFORMATUX Mentions légalesTraitement des données personnellesPolitique de confidentialité