当复选框处于活动状态时更改其背景颜色

Question

如果自定义样式复选框处于活动状态（选中），我想将背景颜色更改为绿色。我试过这个

网页

    <div class="checkboxOne">
        <input type="checkbox" value="1" id="checkboxOneInput" name="" />
        <label for="checkboxOneInput"></label>
    </div>

CSS

input[type=checkbox] {
    visibility: hidden;
}

.checkboxOne {
    width: 40px;
    height: 10px;
    background: #9c9d9d;
    margin: 20px 80px;
    position: relative;
    border-radius: 3px;
box-shadow: inset 0px 0px 2px #565656;
}

.checkboxOne label {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
    cursor: pointer;
    position: absolute;
    top: -4px;
    left: -3px;
border:1px solid #9b9b9b;
    background: #fff;
}

.checkboxOne input[type=checkbox]:checked + input {
    background: #21ae56;
}

.checkboxOne input[type=checkbox]:checked ~ div {
    background: #21ae56;
}

.checkboxOne input[type=checkbox]:checked + label {
    left: 27px;
}

但是，它不会改变背景。正确的做法是什么？

代码笔：http://codepen.io/anon/pen/WGvPpk

Answer 1

复选框没有背景颜色属性

您可以使用假元素来包装复选框并更改它们的颜色：

input[type=checkbox] {
  width: 30px;
  height: 30px;
  font-size: 27px;
}
input[type=checkbox]:after {
  content: " ";
  background-color: purple;
  display: inline-block;
  visibility: visible;
}
input[type=checkbox]:checked:after {
  content: "\2714";
  /* this is a checkmark symbol */
}

<label>Checkbox label
  <input type="checkbox">
</label>