简单 checkbox 样式美化

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）