Comment changer la couleur du texte de substitution avec CSS ?

Lucas D. -

Problème : Personnalisation de la couleur du texte de l'espace réservé

Le texte de l'espace réservé dans les champs de formulaire apparaît souvent par défaut en gris clair. Cela ne correspond pas toujours au design d'un site web. Modifier cette couleur peut améliorer la cohérence visuelle et l'accessibilité. Cependant, cela nécessite des techniques CSS spécifiques.

Techniques CSS pour changer la couleur du texte de l'espace réservé

Utilisation des pseudo-éléments

Le pseudo-élément ::placeholder est la méthode standard pour styliser le texte de l'espace réservé. Il cible le texte de l'espace réservé dans les champs de formulaire. Voici un exemple :

::placeholder {
  color: #999;
}

Cette méthode fonctionne dans la plupart des navigateurs modernes. Vérifiez la compatibilité des navigateurs lors de l'utilisation de cette technique.

Exemple: Contraste de l'espace réservé

Assurez-vous que la couleur de l'espace réservé a un contraste suffisant avec l'arrière-plan du champ de saisie pour une meilleure lisibilité. Utilisez des outils comme le Vérificateur de Contraste de WebAIM pour vérifier le rapport de contraste.

Pseudo-classes et pseudo-éléments spécifiques aux navigateurs

Pour une prise en charge plus large des navigateurs, vous devrez peut-être utiliser des sélecteurs spécifiques aux fournisseurs :

  • ::-webkit-input-placeholder pour les navigateurs WebKit (Chrome, Safari, versions plus récentes d'Opera) :
::-webkit-input-placeholder {
  color: #999;
}
  • ::-moz-placeholder pour Mozilla Firefox :
::-moz-placeholder {
  color: #999;
  opacity: 1;
}

Remarque : Firefox applique une opacité au texte de l'espace réservé par défaut. Définir opacity: 1 affiche la couleur comme prévu.

  • :-ms-input-placeholder pour Internet Explorer et Edge :
:-ms-input-placeholder {
  color: #999;
}