在日常的项目中，出现复选框或者单选框，应该都属于常见需求了，最开始阶段，一般只有两种可能性：
一、完全使用 <input type="checkbox" />或者<input type="radio" />完成复选框和单选框，如此，就必须接受不同的浏览器对input[type=checkbox]或者input[type=radio]的默认定义，基本上没办法对其默认样式进行修改。
二、使用js模拟，使用任意的html标签，如span，定义一个默认样式和选中之后的样式，然后点击之后，判断其是选中还是取消选中，在这种情况下，就得对单选和复选写不同的js，虽说这一小段js并不困难，但是在项目中多处使用复选和单选的时候，终归是比较繁琐的。
css3出现以后，在能够兼容css3设备或者浏览器上，就出现了第三种可能性，使用css3编写自定义的单选框或者复选框，而且不涉及任何一段js代码。
类似于如此，不适用任何js的自定义一个选中状态的复选框，是重构同学心中一直以来的一个梗吧。
<label class="multiple">
<input type="checkbox"><span></span>
</label>
html其实很简单，就是在<input type="checkbox" />后面新增一个可以自定义样式的标签span
.multiple input[type=checkbox] {
visibility: hidden;
position: absolute;
z-index: 20;
left: 0;
}
.multiple input[type=checkbox] + span {
display: inline-block;
vertical-align: middle;
16px;
height: 16px;
border: solid 1px #898989;
background-color: #f8f8f8;
border-radius: 2px;
margin-right: 10px;
position: relative;
}
.multiple input[type=checkbox]:checked + span:before {
content: "";
position: absolute;
left: -2px; right: -2px;
top: -2px; bottom: -2px;
z-index: 3;
background: url(../images//selected.png) no-repeat center center;
}
稍微解释几个关键点：
visibility: hidden; 功能类似于display:none;也是对元素进行隐藏，区别于display:none;的地方在于，使用visibility: hidden; 隐藏的元素，是占位的。可以在网上查一下关于隐藏元素的几种方式，应该会有所收获的。不知道为什么，使用这种方式隐藏的input[type=checkbox]，在IE8上没办法点击到。
input[type=checkbox] + span +选择符，是css2提供的选择符，表示选择input[type=checkbox]后面的那个span标签。
input[type=checkbox]:checked + span 表示被选中的checkbox后面的span，这就出现了自定义的可能性。 伪类:checked属于css3选择器，所以IE8及以下兼容不了。