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

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

Barbara Streisand
Libérer: 2024-11-01 23:29:29
original
695 Les gens l'ont consulté

Why Can't I Change the  Background Color of My Checkbox in 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>
Copier après la connexion

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>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal