CSS ''background-color“”属性在<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

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

与intended

• Firefox，Safari和Chrome一样，
• IE将显示红色边框，而
• Opera将显示红色背景，而Chrome将不执行任何

操作

This German language article比较了几种浏览器，并至少解释了IE的行为。它可能有点老(仍然包括Netscape)，但当你在周围测试时，你会注意到没有太多变化。另一个比较可以在here中找到。

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>

​