纯CSS实现自定义复选框样式

复选框和单选框在绝大多数浏览器里无法设置样式（无法修改颜色），而有时需要修改它的样式。可以通过给input或label增加伪类的方式，但input增加伪类会存在浏览器间不支持的情况。采用给label增加伪类的方式更好，还能与复选框关联，触发开关。

原理：
通过对label增加伪元素，并基于复选框的状态来为其设置样式美化。再把真正的复选框隐藏起来（最好不要用display：none和visibility：hidden方法，因为它们会将复选框从tab键切换焦点的队列中完全删除）。

实现代码：

<style>
    input[type="checkbox"] + label::before {
        content: '\a0'; /* 不换行空格 */
        display: inline-block;
        vertical-align: .2em;
        width: .8em;
        height: .8em;
        margin-right: .2em;
        border-radius: .2em;
        background: silver;
        text-indent: .15em;
        line-height: .65; 
    }

    input[type="checkbox"]:checked + label::before {
        content: '\2713';
        background: yellowgreen; 
    }

    input[type="checkbox"] {
         position: absolute;
         clip: rect(0, 0, 0, 0); /*全部裁剪*/
    }

    input[type="checkbox"]:focus + label::before /*聚焦的样式*/{
         box-shadow: 0 0 .1em .1em #58a; 
    }

    input[type="checkbox"]:disabled + label::before { /*全部裁剪的样式*/
        background: gray;
        box-shadow: none;
        color: #555; 
    }
</style>

<input type="checkbox" id="awesome" />
<label for="awesome">Awesome!</label>

效果：

参考资料：《CSS揭秘》