Pourquoi ne puis-je pas changer la couleur d'une case à cocher avec CSS ?

Pourquoi est-il impossible de changer la couleur des cases à cocher quelles que soient les modifications du code ?

Malgré les efforts visant à personnaliser la couleur d'arrière-plan des cases à cocher via CSS, de nombreuses les utilisateurs rencontrent un manque de changements visibles. Ce problème est répandu dans Firefox 29 et versions ultérieures.

Explication

L'impossibilité de modifier la couleur de la case à cocher provient d'une omission délibérée de cette fonctionnalité dans HTML. Les cases à cocher et les boutons radio sont considérés comme des éléments de formulaire « natifs », ce qui signifie que leur apparence est régie par le navigateur plutôt que par les règles CSS. Les navigateurs donnent la priorité à la cohérence de l'interface utilisateur et appliquent ainsi les propriétés visuelles par défaut de ces éléments.

Solution

Pour surmonter cette limitation et personnaliser l'apparence des cases à cocher, envisagez d'utiliser la propriété CSS suivante :

<code class="css">accent-color</code>

En définissant cette propriété, vous obtenez le contrôle de la couleur d'accent appliquée à la case à cocher, qui englobe la coche et tout arrière-plan qui l'accompagne. Voici un exemple :

<code class="css">#cb1 {
  accent-color: #9b59b6; /* Change the color of the check mark within checkbox #cb1 to blue */
}</code>

Démonstration

Voir la démo ci-dessous pour assister à la modification réussie des couleurs des cases à cocher à l'aide de la propriété accent-color :

<code class="html"><input id="cb1" type="checkbox" checked />
<input id="cb2" type="checkbox" checked />
<input id="cb3" type="checkbox" checked /></code>

<code class="css">#cb1 {
  accent-color: #9b59b6;
}

#cb2 {
  accent-color: #34495e;
}

#cb3 {
  accent-color: #e74c3c;
}</code>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!