复选框作为网页中比较常见的一个组件，有的时候我们需要对它进行美化，但是我们无法直接为其定义样式，所以我们需要一些其它的办法。
表单元素中有label元素和for属性，当我们点击label标签时，对应的表单元素就会有所反应。我们就是依据这个特性来实现的。
html:
<body><input type="checkbox" id="myCheck"><label for="myCheck"></label></body>
既然是自定义，我们就要把label伪装成复选框的样子，比较常见的是方框状，所以我们就有了如下的CSS样式。
#myCheck + label{background-color: white;border-radius: 5px;border:1px solid #d3d3d3;width:20px;height:20px;display: inline-block;text-align: center;vertical-align: middle;line-height: 20px;}
这样我们就为label元素定义为圆角的正方形边框，然后就需要根据复选框的状态进行相应的样式调整。
#myCheck:checked + label{background-color: #eee;}#myCheck:checked + label:after{content:"\2714";}
上述代码分别为label元素定义了复选框选中状态时应具有的样式，比如背景色变灰、而且添加了“√”，\2714就是相应的编码。
这样我们就大功告成了，但是别忘了，我们要将自带的checkbox定义为display:none;这样就可以隐藏自带的复选框了。
效果图（不要忘记将原来的设为隐藏，这里为展示效果）：
更多参考链接：/view-blog-295.html
/technology/style-checkboxes-with-css.shtml
