Pourquoi la couleur d'arrière-plan ne s'applique-t-elle pas aux cases à cocher dans un div défilant ?

Problème d'attribut CSS 'background-color' avec les cases à cocher dans une division

Malgré la définition de l'attribut 'background-color' en CSS pour les cases à cocher dans un div déroulant, la modification de la couleur d'arrière-plan n'est pas appliquée. Cependant, d'autres attributs tels que « margin-top » fonctionnent comme prévu.

Le code HTML et CSS fourni par l'utilisateur est le même. suit :

HTML:

<div>

CSS:

.listContainer {
    border:2px solid #ccc;
    width:340px;
    height: 225px;
    overflow-y: scroll;
    margin-top: 20px;
    padding-left: 10px;
}

.oddRow {
    margin-top: 5px;
    background-color: #ffffff;
}

.evenRow{
    margin-top: 5px;
    background-color: #9FFF9D;
}

Explication:

Le problème se pose car les cases à cocher ne prennent pas en charge nativement la « couleur d'arrière-plan » attribut. Pour créer l'effet visuel souhaité, vous devez envelopper chaque case à cocher dans un élément div et attribuer la couleur à ce div à la place.

HTML révisé :

<div>

CSS révisé :

.listContainer {
    /* Same as before */
}

.oddRow, .evenRow {
    /* Remove incorrect background-color */
}

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