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

Posted 2023-02-21

【中文标题】激活复选框时更改其背景颜色[重复]

【英文标题】：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 年以来您可以或不可以设置复选框样式的所有可能方式的大量集合。​​

谢谢你，很高兴在这里看到友好的用户。

【参考方案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>