自定义radio/checkbox的样式

借助css3提供的一个伪类 :checked，只要radio/checkbox处于选中状态，这个伪类就会生效，因此可以利用选中和非选中这两种状态，去切换不同的样式。

<style type="text/css">
    input[type=checkbox]{
	display: none;
    }
    /*未选中的checkbox的样式*/
    .checkbox{
        width: 12px;
        height: 12px;
        border-radius: 50%;
        border: 1px solid #333;
        display: block;
    }
    /*选中的checkbox的样式*/
    input[type=checkbox]:checked + .checkbox{
        background: #666;
        box-shadow: 0 0 3px #666;
    }
</style>
<label>
    <input type="checkbox" />
    <span class="checkbox"></span>
</label>

选中的checkbox的样式可以添加一个背景图或者图标字体。:checked兼容性还是比较好的，只要不需要兼容IE8就可以使用，换句话说只要你可以用nth-of-type，就可以用 :checked。