input.
Le placeholder est un texte d’exemple qui permet de donner des indications aux utilisateurs sur la forme des données attendues pour un champ.
Pendant longtemps, il n’existait pas de moyen simple de personnaliser la couleur du placeholder en CSS et on était donc obligé d’afficher un texte gris par défaut.
Aujourd’hui, nous disposons du pseudo élément ::placeholder qui va nous permettre de modifier l’apparence d’un placeholder et de lui appliquer des styles CSS personnalisés.
Regardez plutôt l’exemple suivant :
See the Pen
Modifier la couleur d’un placeholder en CSS by Pierre (@pierregiraud)
on CodePen.
Ici, nous ciblons chacun de nos éléments input grâce à leur id et on utilise le pseudo élément ::placeholder pour appliquer des styles au texte du placeholder en particulier. On se contente de modifier la couleur de notre premier placeholder tandis qu’on modifie la couleur et le style d’écriture de notre deuxième placeholder en l’affichant en italique.
Faites bien attention à ne pas laisser d’espace entre l’id et le pseudo élément lors du ciblage en CSS. Si vous laissez des espaces, les styles ne s’appliqueront pas.
