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!