Pour changer la couleur de l'espace réservé (placeholder) d'un champ de saisie HTML avec CSS, vous pouvez utiliser les pseudo-classes ::placeholder. Voici comment vous pouvez le faire :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Changer la couleur du placeholder</title>
<style>
input::placeholder {
color: red; /* Changez cette valeur pour la couleur souhaitée */
opacity: 1; /* Assurez-vous que l'opacité est définie à 1 pour que la couleur soit pleinement visible */
}
</style>
</head>
<body>
<input type="text" placeholder="Entrez votre texte ici">
</body>
</html>Explications :
input::placeholder: Cette pseudo-classe cible le texte du placeholder à l'intérieur des élémentsinput.color: red;: Cette propriété CSS définit la couleur du texte du placeholder. Vous pouvez remplacer "red" par n'importe quelle couleur désirée (comme#ff0000pour du rouge ourgb(255,0,0)).opacity: 1;: Par défaut, certains navigateurs appliquent une opacité réduite aux placeholders. Cette ligne s'assure que la couleur du placeholder est pleinement visible.
Vous pouvez également appliquer des styles similaires aux placeholders dans les textarea ou d'autres types de champs en utilisant les mêmes sélecteurs.
Compatibilité des navigateurs
Les navigateurs récents supportent ::placeholder, mais pour une compatibilité plus large avec les anciennes versions de certains navigateurs, vous pouvez ajouter les préfixes spécifiques :
input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: red;
opacity: 1;
}
input:-moz-placeholder { /* Mozilla Firefox 18- */
color: red;
opacity: 1;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
color: red;
opacity: 1;
}
input:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: red;
opacity: 1;
}
input::placeholder { /* Standard syntaxe */
color: red;
opacity: 1;
}
CSS
- 