为什么背景颜色不应用于可滚动 Div 中的复选框？

div 中复选框的 CSS 'background-color' 属性问题

尽管在 CSS 中为复选框设置了 'background-color' 属性在可滚动 div 中，不会应用背景颜色修改。但是，其他属性（例如“margin-top”）可以按预期工作。

用户提供的 HTML 和 CSS 代码如下如下：

HTML:

<div>
<p><strong>CSS:</strong></p>
<pre class="brush:php;toolbar:false">.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;
}

说明：

出现这个问题是因为复选框本身并不支持“背景颜色”属性。要创建所需的视觉效果，您必须将每个复选框包装在 div 元素中，并将颜色分配给该 div。

修订的 HTML：

<div>
<p><strong>修改后的 CSS：</strong></p>
<pre class="brush:php;toolbar:false">.listContainer {
    /* Same as before */
}

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

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

.oddRow {
    background-color: #ffffff;
}