Changer la couleur de l'espace réservé (placeholder)

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 :

  1. input::placeholder: Cette pseudo-classe cible le texte du placeholder à l'intérieur des éléments input.
  2. 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 #ff0000 pour du rouge ou rgb(255,0,0)).
  3. 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;
}

En utilisant ces sélecteurs, vous vous assurez que le style du placeholder sera appliqué correctement à travers différents navigateurs et versions.

28 mai 2024 - Wakonda - CSS

Rechercher

Tags

Articles récents

Publicité

Suivez-nous

Aidez-nous !

Aidez-nous !