自定义复选框

困难产生原因

复选框和单选框任然不能自定义样式

解决方案

1. 把 label 元素与复选框关联起来，选中 label 即选中复选框
2. 把真正的复选框隐藏起来（但不能把它从 tab 切换焦点队列中删除，即不能 display:none）
3. 对 label 的伪元素美化一番，顶替原来的复选框

<input type="checkbox" id="box">
<label for="box">标签</label>

/* 隐藏复选框，但还能 tab 得到焦点 */
input[type="checkbox"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}
/* 设计未选中的复选框 */
input[type="checkbox"] + label::before {
    content: '\a0'; /* 不换行的空格 */
    display: inline-block;
    width: .8em;
    height: .8em;
    margin-right: .2em;
    line-height: .65;
    border-radius: .2em;
    background: silver;
}
/* 设计选中的复选框 */
input[type="checkbox"]:checked + label::before {
    content: '\2713'; /* 勾 */
    background: yellowgreen;
}

开关式按钮

本质和复选框一样，切换开关状态

input[type="checkbox"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

input[type="checkbox"] + label::before {
    content: '关闭状态';
    display: block;
    width: 100px;
    line-height: 40px;
    text-align: center;
    color: white;
    text-shadow: 0 1px 1px rgba(0,0,0,.2);
    border: 1px solid rgba(0,0,0,.2);
    box-shadow: 0 1px white inset;
    border-radius: .2em;
    background: linear-gradient(#FDE2E2, #F56C6C);
    transition: all .3s;
}

input[type="checkbox"]:checked + label::before {
    content: '打开状态';
    background: linear-gradient(#E1F3D8, #67C23A);
    box-shadow: .05em .1em .2em rgba(0,0,0,.6) inset;
}