先隐藏需要自定义样式的checkbox复选框
input[type=checkbox]{
visibility:hidden;
}
隐藏掉Checkbox复选框后，添加一个label HTML元素，并设置for属性指向对象checkbox元素。
html结构：
<div class='agree-box'>
<input type='checkbox' id='switch' name='agree'/>
<label for='switch'></label>
</div>
CSS结构：
.agree-box{
position: relative; //重点是位label标签提供绝对定位参考
width: 40px;
height: 20px;
background-color: #ccc;
border-radius: 10px;
}
input[type=checkbox] { //隐藏checkbox元素
visibility: hidden;
}
.check-label {
position: absolute; //开启绝对定位，方便移动
top: 0;
left: 0;
display: inline-block;
height: 100%;
width: 20px;
transition: all 0.5s; //添加过渡效果
border-radius: 10px;
background-color: red;
}
input[type=checkbox]:checked+label { //重点语句
left: 20px;
background-color: green;
}
以上就是完全不借助JS实现自定义样式。
表现：
自定义打勾的checkbox
HTML结构：
<div class="box">
<input type="checkbox" name="switch" id="switch">
<label for="switch"></label>
</div>
CSS结构：
.box {
width: 25px;
height: 25px;
}
input[type=checkbox] {
visibility: hidden;
}
label {
position: relative;
display: inline-block;
width: 25px;
height: 25px;
text-align: center;
background-color: #eeeeee;
}
label::after {
content: '';
display: inline-block;
width: 7px;
height: 12px;
border-bottom: 4px solid #323232;
border-right: 4px solid #323232;
transform: rotate(45deg);
opacity: 0;
}
input[type=checkbox]:checked+label::after {
opacity: 1;
}
表现：
