CSS“背景色”属性不适用于<div>中的复选框

Question

该标题对此进行了解释。我在可滚动的div中有几个复选框。但是由于某些原因，“背景颜色”属性不起作用。尽管“边际收益”似乎确实有效……

只是让我感到困惑的是，一个属性如何工作而另一属性却没有。也不像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;

        }

预先感谢任何可以向我指出正确方向的人！

Answer 1

复选框没有背景色，您可能想要做的是用具有该颜色的div包装每个复选框。您的输出应该是这样的：<div class="evenRow">&nbsp; &nbsp; <input type="checkbox" /></div><div class="oddRow">&nbsp; &nbsp; <input type="checkbox" /></div><div class="evenRow">&nbsp; &nbsp; <input type="checkbox" /></div><div class="oddRow">&nbsp; &nbsp; <input type="checkbox" /></div>

Answer 2

除了当前接受的答案：您还可以设置复选框/单选按钮的边框和背景，但是最终呈现的方式取决于浏览器。例如，如果您在复选框上设置了红色背景IE会显示红色边框Opera将按预期显示红色背景Firefox，Safari和Chrome无法执行任何操作本文比较了几种浏览器，并至少说明了IE行为。它可能会更旧一些（仍然包括Netscape），但是当您进行测试时，您会注意到变化不大。在这里可以找到另一个比较。

Answer 3

您可以使用如下的peseudo元素：input[type=checkbox] {&nbsp; width: 30px;&nbsp; height: 30px;&nbsp; margin-right: 8px;&nbsp; cursor: pointer;&nbsp; font-size: 27px;}input[type=checkbox]:after {&nbsp; content: " ";&nbsp; background-color: #9FFF9D;&nbsp; display: inline-block;&nbsp; visibility: visible;}input[type=checkbox]:checked:after {&nbsp; content: "\2714";}<label>Checkbox label&nbsp; &nbsp; &nbsp; <input type="checkbox">&nbsp; &nbsp; </label>