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

Question

标题几乎解释了它.我在可滚动的div中有几个复选框.但由于某些原因,'background-color'属性不起作用.虽然'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;
        }

提前感谢任何可以指引我正确方向的人!

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

你可以使用像这样的伪元素:

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>

Answer 4

经过这么多的麻烦我明白了。

    .purple_checkbox:after {
      content: " ";
      background-color: #5C2799;
      display: inline-block;
      visibility: visible;
    }
    
    .purple_checkbox:checked:after {
      content: "\2714";
      box-shadow: 0px 2px 4px rgba(155, 155, 155, 0.15);
      border-radius: 3px;
      height: 12px;
      display: block;
      width: 12px;
      text-align: center;
      font-size: 9px;
      color: white;
    }

 <input type="checkbox" class="purple_checkbox">

用这段代码检查时会是这样。

Answer 5

我的解决方案

最初在这里发布。

input[type="checkbox"] {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: 0;
  background: lightgray;
  height: 16px;
  width: 16px;
  border: 1px solid white;
}

input[type="checkbox"]:checked {
  background: #2aa1c0;
}

input[type="checkbox"]:hover {
  filter: brightness(90%);
}

input[type="checkbox"]:disabled {
  background: #e6e6e6;
  opacity: 0.6;
  pointer-events: none;
}

input[type="checkbox"]:after {
  content: '';
  position: relative;
  left: 40%;
  top: 20%;
  width: 15%;
  height: 40%;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  display: none;
}

input[type="checkbox"]:checked:after {
  display: block;
}

input[type="checkbox"]:disabled:after {
  border-color: #7b7b7b;
}

<input type="checkbox"><br>
<input type="checkbox" checked><br>
<input type="checkbox" disabled><br>
<input type="checkbox" disabled checked><br>

Answer 6

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

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

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

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