完全使用css编写复选框

在日常的项目中，出现复选框或者单选框，应该都属于常见需求了，最开始阶段，一般只有两种可能性：

一、完全使用  <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;
  width: 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及以下兼容不了。