Question

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

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

Answer 1

复选框没有背景颜色属性

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

＆＃13;

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 */
}

＆＃13;

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

＆＃13;

当活动时复选框的背景颜色

1 个答案: