我正在尝试将滑块按钮连接到一个复选框,就像在这里找到的那样:http: //www.paulund.co.uk/style-checkboxes-with-css。滑块工作正常,但我不能让它在点击时改变背景颜色。
几天来,我一直在尝试解决这个问题,并找到了答案(例如,此处:单击复选框时更改 div的背景颜色和更改 ChecklistBox 的 CheckBox 背景颜色),但是当我尝试将其应用于我的代码它不会改变背景颜色。
最好在 CSS 中进行修复,因为所有设计都已经在 CSS 中,但 Jquery 显然也很好。在此先感谢您的帮助!
这是我所得到的(对于 CSS 中的冗长,请提前抱歉)html:
<div class="checkboxOne">
<input type="checkbox"
value="1" id="checkboxOneInput" name="" />
<label for="checkboxOneInput"></label>
</div>
CSS:
input[type=checkbox] {
visibility: hidden;
position: absolute;
}
.checkboxOne{
width: 220px;
height: 40px;
background-color: yellow;
margin: 20px 60px;
border-radius: 50px;
font-family:Calibri;
position: relative;
}
.checkboxOne input[type=checkbox]:checked + label {
left: 120px;
background:orange;
}
/*slider*/
.checkboxOne label {
display: block;
width: 92px;
height: 22px;
border-radius: 50px;
-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
-o-transition: all .1s ease;
-ms-transition: all .1s ease;
transition: all .1s ease;
cursor: pointer;
position: absolute;
top: 9px;
z-index: 1;
left: 12px;
background:green;
}