html 切换(开/关)复选框
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html 切换(开/关)复选框相关的知识,希望对你有一定的参考价值。
$('.checkbox_check').click(function() {
$(this).parent().toggleClass('active');
});
/* Rounded sliders */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 10px;
left: 40px;
.no { color: $light-green; }
.yes { color: #cdcdcd; }
&.active {
.no { color: #cdcdcd !important; }
.yes { color: $light-green !important; }
}
input { display:none; }
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #cdcdcd;
transition: .4s;
&:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: -3px;
bottom: -7px;
background-color: $light-green;
transition: .4s;
}
}
input:checked + .slider {
background-color: $light-green;
}
input:focus + .slider {
box-shadow: 0 0 1px #CDCDCD;
}
input:checked + .slider:before {
transform: translateX(40px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
span.answer {
font-family: $primary-font;
font-size: 1.6rem;
font-weight: 400;
position: relative;
&.no {
left: -35px;
top: -5px;
}
&.yes {
left: 55px;
top: -5px;
}
&.active {
color: $light-green;
}
}
}
<label class="switch">
<span class="answer no">No</span>
<span class="answer yes">Yes</span>
<input type="checkbox" class="checkbox_check">
<div class="slider round"></div>
</label>
以上是关于html 切换(开/关)复选框的主要内容,如果未能解决你的问题,请参考以下文章
如何在android中显示密码开/关模式的切换按钮
JavaScript - 从开关中获取价值[重复]
JQuery 测验应用程序 - 使用 <id> 标签来切换变量的开/关
Unity3D 之UGUI 切换开关(toggle)
Android:以编程方式更改 NFC 设置(开/关)
如何保存工具按钮开/关选择的状态?