Pourquoi ne puis-je pas modifier la couleur d'arrière-plan de ma case à cocher dans Firefox 29 ?

Dépannage de la modification de la couleur d'une case à cocher

Vous avez rencontré des difficultés pour changer la couleur d'arrière-plan d'une case à cocher, malgré l'essai de différents styles CSS. Ce comportement est particulièrement déroutant lorsque vous utilisez Firefox 29, qui est à jour. Pour résoudre ce problème, étudions le comportement sous-jacent du CSS et du navigateur.

Feuille de style CSS

Le CSS que vous avez fourni comprend deux règles qui tentent de styliser la case à cocher :

<code class="css">input[type="checkbox"] {
    background: #990000;
}

.chk {
   background-color: #990000;
}</code>

La première règle cible toutes les cases à cocher utilisant le sélecteur d'attribut, tandis que la deuxième règle cible les éléments avec la classe « chk ». Dans les deux cas, la couleur d'arrière-plan est définie sur #990000.

Comportement du navigateur

Firefox, ainsi que d'autres navigateurs, a implémenté certains styles par défaut pour les éléments de formulaire comme les cases à cocher. . Ces styles par défaut peuvent remplacer vos règles CSS, ce qui rend difficile la modification de l'apparence de la case à cocher.

Solution

Pour résoudre ce problème, vous pouvez utiliser l'accent- propriété color, qui vous permet de spécifier une couleur pour divers éléments de formulaire, y compris les cases à cocher. Voici un exemple CSS mis à jour :

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

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

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

Dans cet exemple, les éléments de case à cocher se voient attribuer différentes couleurs d'accent à l'aide de l'attribut #cb ID. Cela devrait remplacer les styles de navigateur par défaut et vous permettre de modifier la couleur de la case à cocher comme vous le souhaitez.

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!