Pourquoi « background-color » ne fonctionne-t-il pas sur les cases à cocher dans un Div défilant et comment puis-je y remédier ?

L'énigme de l'attribut de couleur d'arrière-plan des cases à cocher en CSS

Le problème survient lors de l'utilisation de l'attribut 'background-color' sur les cases à cocher dans un '< défilant ;div>'. Bien qu'il ait un attribut 'margin-top' spécifié qui fonctionne normalement, l'attribut 'background-color' reste inefficace.

La curiosité vient de la façon dont un attribut peut fonctionner tandis que l'autre échoue, en particulier lorsque l'attribut '< div>' ne définit aucun attribut de couleur d'arrière-plan conflictuel.

Cause et solution

La racine du problème réside dans la nature des cases à cocher. Les cases à cocher, par défaut, n'ont pas la capacité inhérente d'afficher les couleurs d'arrière-plan. Pour obtenir l'effet de couleur souhaité, vous pouvez cocher chaque case avec un «

<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>