HTML:
<label style="position: relative;">
<input type="checkbox" style="display: none;">
<span class="checkbtn"></span>
<span>选项一</span>
</label>
<label style="position: relative;">
<input type="checkbox" style="display: none;">
<span class="checkbtn"></span>
<span>选项二</span>
</label>
CSS:
.checkbtn{
display: inline-block;
width: 14px; height: 14px;
border: 1px solid #dcdfe6;
border-radius: 3px;}
input[type="checkbox"]:checked+span {
background: #409eff;
border: 1px solid #409eff;
}
.checkbtn:after {
box-sizing: content-box;
content: "";
border: 2px solid #fff;
border-left: 0;
border-top: 0;
width: 5px;
height: 10px;
position: absolute;
top: 1px;
left: 4px;
transform: rotate(45deg) scaleY(0);
transform-origin: center;
transition: transform .15s ease-in .05s;
}
input[type="checkbox"]:checked+span::after {
transform: rotate(45deg) scaleY(1);
}
隐藏复选框 input ,使用相邻兄弟选择器,选择紧接在 input 后的 span 作为复选框按钮
复选框被选择后,修改紧接的 span 样式
使用 span 的伪元素 :after 作为选中样式,再添加一个过渡效果
最终样式如下(过渡效果没法截图,大家可以自己试一下d=====( ̄▽ ̄*)b)