Html5--利用lable+CSS3实现自定义checkbox

问题：

在用Html5做一个web APP的时候发现用浏览器自带的input checkbox不是很好看，就想着是否能做类似原生APP（Android&IOS的选择）

解决方法：

1. 在Html4阶段可能采用的方式就是切图展现，然后点击切换图片。

2. 在Html5中可以使用lable+CSS3样式直接自定义各种不同的checkbox。（注意：要浏览器支持Html5，因为我目前所做web app都是webkit内核，所以基本上都使用Html5新特性）

原理以及实现：

1. lable标签为input标签的标注，当lable标签的for属性和表单控件ID值相同时，点击lable标签就触发表单控件，这里就解决了触发问题了，如下写法，就相当于点击lable就点击input控件。

<input type="checkbox" checked="checked" id="jzmm"/><label for="jzmm" class="chebox-lable"></label>

2. CSS中提供了:after 选择器在被选元素的内容后面插入内容，请使用 content 属性来指定要插入的内容。

#jzmm {display:none;}#jzmm + .chebox-lable{display:inline-block;position: relative;padding:10px;border: 2px solid #0097d0;border-radius:2px;float:left;}#jzmm:checked + .chebox-lable:after{content: '\2714';color: #FF0000;font-size:20px;position:absolute;left:0px;top:0px;}