CSS ''background-color" 属性在 <div> 内的复选框上不起作用

Question

标题几乎解释了它。我在可滚动的 div 中有几个复选框。但由于某些原因，“背景颜色”属性不起作用。虽然’margin-top’似乎确实有效……

只是让我感到困惑，一个属性如何起作用，而另一个属性不能。它也不像 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;
        }

提前感谢任何可以为我指明正确方向的人！

原文由 user818700 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

复选框没有背景颜色。

但要添加效果，您可以使用具有颜色的 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>

原文由 dov.amir 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

2022 - 现在有一个更好的解决方案来解决这个问题

只需使用 accent-color 属性并确保获得适当的 对比度 以实现可访问性：

 .blue-checkbox {
    accent-color: #00eaff;
    height: 30px; /* not needed */
    width: 30px; /* not needed */
}

 <input class="blue-checkbox" type="checkbox" />

原文由 maxshuty 发布，翻译遵循 CC BY-SA 4.0 许可协议