CSS3实现checkbox和radio自定义样式

    我们知道浏览器自带的checkbox复选框和radio单选框不怎么美观，而且在不同的浏览器上显示的样式又有很大的差异，由于目前越来越多的人开始接受支持CSS3的现代浏览器，所以今天就简单的用一些CSS3代码来自定义checkbox和radio的显示方式。

实现思路

    原理很简单，先把页面上<input type="checkbox">的display设置为none，从而把它隐藏掉，然后利用CSS3代码来绘制与checkbox（radio）相连的label元素，用label来模拟checkbox（radio）。

    另外，我们可以利用伪元素::before和::after给label添加样式，利用CSS3的伪类选择器:checked，:hover，:focus，:disabled设置不用状态的样式。

示例

1.自定义checkbox（样式1）

效果图：

演示地址：http://jsrun.net/DGZKp