html - CSS“背景色”属性在<div>内的复选框上不起作用

标题很好地解释了这一点。我在可滚动div中有几个复选框，但是由于某些原因，“background color”属性不起作用。虽然“边缘顶部”似乎确实有效。。。
只是让我困惑一个属性如何工作而另一个不工作。这也不像div有自己的背景颜色属性集，可能会超过复选框属性。
无论如何，下面是我的HTML（由JSP生成）：

<div class="listContainer">
    <input type="checkbox" class="oddRow">item1<br/>
    <input type="checkbox" class="evenRow">item2<br/>
    <input type="checkbox" class="oddRow">item3<br/>
    <input type="checkbox" class="evenRow">item4<br/>
    ...
</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;
        }

提前感谢所有能指引我正确方向的人！

最佳答案

复选框没有背景色，
您可能想做的是用具有该颜色的div包装每个复选框。
你的输出应该是这样的：

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