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

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

Answer 2

除了当前接受的答案：您还可以设置复选框/单选按钮的边框和背景，但是最终呈现的方式取决于浏览器。例如，如果您在复选框上设置了红色背景

IE会显示红色边框

Opera将按预期显示红色背景

Firefox，Safari和Chrome无法执行任何操作

本文比较了几种浏览器，并至少说明了IE行为。它可能会更旧一些（仍然包括Netscape），但是当您进行测试时，您会注意到变化不大。在这里可以找到另一个比较。

Answer 3

您可以使用如下的peseudo元素：

input[type=checkbox] {

  width: 30px;

  height: 30px;

  margin-right: 8px;

  cursor: pointer;

  font-size: 27px;

}

input[type=checkbox]:after {

  content: " ";

  background-color: #9FFF9D;

  display: inline-block;

  visibility: visible;

}

input[type=checkbox]:checked:after {

  content: "\2714";

}

<label>Checkbox label

      <input type="checkbox">

    </label>