html中checkbox的自定义效果实例

checkbox应该是一个比较常用的html功能了，不过浏览器自带的checkbox往往样式不怎么好看，而且不同浏览器效果也不一样。出于美化和统一视觉效果的需求，checkbox的自定义就被提出来了。这里对实现方法做个总结。

实现思路

纯css实现的主要手段是利用 label 标签的模拟功能。 label 的 for 属性可以关联一个具体的 input 元素，即使这个 input 本身不可被用户可见，有个与它对应的 label 后，用户可以直接通过和 label 标签交互来替代原生的 input ——而这给我们的样式模拟留下了空间。简而言之就是

隐藏原生input，样式定义的过程留给 label （那为什么不直接改变checkbox的样式？因为checkbox作为浏览器默认组件，样式更改上并没有label那么方便，很多属性对 checkbox 都是不起作用的，比如 background ,而 label 在样式上基本和div一样'任人宰割')

而在选择事件上，由于css的“相邻选择符(E+F)”的存在，让我们可以直接利用html的默认checkbox，免去了js模拟选择的麻烦。

demo

DEMO的部分CSS3属性只写了webkit前缀，所以建议用webkit内核的浏览器查看本页
HTML代码：

<div class="wrap"><!-- `input`的id必须有，这个是label进行元素匹配所必需的 --><!-- 可以看到每个input的id和label的“for”属性对应同一字符串 --><input type="checkbox" id="checkbox01" /><label for="checkbox01"></label><input type="checkbox" id="checkbox02" /><label for="checkbox02"></label><input type="checkbox" id="checkbox03" /><label for="checkbox03"></label><input type="checkbox" id="checkbox04" /><label for="checkbox04"></label> 

查看更多关于html中checkbox的自定义效果实例的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did72496