激活复选框时更改其背景颜色[重复]答案

【问题标题】：Change background color of a checkbox when its active [duplicate]激活复选框时更改其背景颜色[重复]
【发布时间】：2017-01-16 18:50:57
【问题描述】：

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

HTML

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

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

Codepen：http://codepen.io/anon/pen/WGvPpk

【问题讨论】：

我不同意这是重复的。这是一个特定的问题，而另一个是自 2010 年以来您可以或不可以设置复选框样式的所有可能方式的大量集合。
谢谢你，很高兴在这里看到友好的用户。

标签： html css

【解决方案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>

【讨论】：