Pourquoi « background-color » ne fonctionne-t-il pas sur les cases à cocher à l'intérieur d'un div défilant ?

L'attribut CSS "background-color" ne fonctionne pas sur les cases à cocher dans

Le problème mis en évidence dans l'enquête est l'incapacité de l'attribut "background-color" pour affecter les cases à cocher entourées d'un div défilant. Alors que des attributs tels que "margin-top" fonctionnent comme prévu, "background-color" reste inefficace.

Pour comprendre ce comportement, il est important de noter que les cases à cocher héritent de leur couleur d'arrière-plan de leurs éléments parents. Par défaut, la couleur d'arrière-plan de base des cases à cocher dépend du style du navigateur. Ainsi, il n'est pas possible de définir directement la couleur d'arrière-plan d'une case à cocher elle-même.

Pour obtenir l'effet souhaité, une approche alternative peut être adoptée en enveloppant chaque case à cocher dans un élément div possédant la couleur d'arrière-plan souhaitée. De cette façon, l'élément div tiendra la case à cocher et servira de proxy pour définir la couleur d'arrière-plan. Par exemple :

<div class="evenRow">
    <input type="checkbox" />
</div>
<div class="oddRow">
    <input type="checkbox" />
</div>
<div class="evenRow">
    <input type="checkbox" />
</div>
<div class="oddRow">
    <input type="checkbox" />
</div>

.evenRow {
    background-color: #9FFF9D;
}

.oddRow {
    background-color: #ffffff;
}

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!

css for while checkbox Attribute function default this margin background issue

Déclaration：

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