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

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

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 什么都不做

This German language article 比较了几个浏览器并至少解释了 IE 的行为。它可能有点旧（仍然包括 Netscape），但是当您进行测试时，您会发现并没有太大变化。另一个比较可以找到here。

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

当你输入body标签时，在不关闭标签的情况下按一次空格，输入bgcolor="red"，例如。然后为你的字体选择一种不同的颜色。

Answer 5

我的解决方案

最初发布here。

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

更改背景复选框颜色的最佳解决方案

input[type=checkbox] {
    margin-right: 5px;
    cursor: pointer;
    font-size: 14px;
    width: 15px;
    height: 12px;
    position: relative;
  }
  
  input[type=checkbox]:after {
    position: absolute;
    width: 10px;
    height: 15px;
    top: 0;
    content: " ";
    background-color: #ff0000;
    color: #fff;
    display: inline-block;
    visibility: visible;
    padding: 0px 3px;
    border-radius: 3px;
  }
  
  input[type=checkbox]:checked:after {
	  content: "✓";
	  font-size: 12px;
  }

  <input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle" value="Car" checked> I have a car<br>

  <input type="checkbox" name="vehicle" value="Car" checked> I have a bus<br>

Answer 7

经过这么多麻烦，我得到了它。

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

在这里改进另一个答案

input[type=checkbox] {
  cursor: pointer;
  margin-right: 10px;
}

input[type=checkbox]:after {
  content: " ";
  background-color: lightgray;
  display: inline-block;
  position: relative;
  top: -4px;
  width: 24px;
  height: 24px;
  margin-right: 10px;
}

input[type=checkbox]:checked:after {
  content: "\00a0\2714";
}

Answer 9

我们可以从 css 文件中提供背景颜色。试试这个，

<!DOCTYPE html>
<html>
    <head>
        <style>
            input[type="checkbox"] {
                width: 25px;
                height: 25px;
                background: gray;
                -webkit-appearance: none;
                -moz-appearance: none;
                appearance: none;
                border: none;
                outline: none;
                position: relative;
                left: -5px;
                top: -5px;
                cursor: pointer;
            }
            input[type="checkbox"]:checked {
                background: blue;
            }
            .checkbox-container {
                position: absolute;
                display: inline-block;
                margin: 20px;
                width: 25px;
                height: 25px;
                overflow: hidden;
            }
        </style>    
    </head>
    <body>
        <div class="checkbox-container">
            <input type="checkbox" />
        </div>
    </body>
</html>