CSS模拟radio单选框check复选框

表单中的一些控件，如 radio 单选框、checkbox 复选框在各个浏览器下表现的很不一样，有的实在是丑的没话说，非常好的设计往往就败在了这些玩意上。

设计狮看不下去了，在一些高大上的设计稿中，就把一些表单元素被设计的很 beautiful，很 biger。等等，设计的大哥大姐们，你们考虑过我们这些小前端的感受不？

input 文本框这些还好，CSS能控制，可是radio、checkbox 这些元素我们控制不了啊，人家CSS也没提供相应的属性来设置啊，让我们怎么搞吗？

很多时候木有办法，我们只能按照设计稿上的设计来，CSS又不支持，那只能模拟了，然后有了用其他标签来模拟这些控件，用JS来实现相应的功能...

言归正传，这里介绍一种纯CSS模拟单选框和复选框的方法，不需要一行JS。

效果如下：

HTML代码：

<label>
    <input type="radio" name="sex" /><i></i>男
</label>

<label>
    <input type="radio" name="sex" /><i></i>女
</label>

<label>
    <input type="radio" name="sex" /><i></i>不男不女
</label>

CSS代码：

label{
    display: block;
    margin-bottom: 10px;
}
input{
    position: absolute; top: -9999px;
}
i{
    display: inline-block;
    width: 17px; height: 17px;
    margin-right: 10px;
    background: url(radio.png) no-repeat;
    vertical-align: middle;
}
input:checked+i{
    background: url(radio_check.png) no-repeat;
}

这种方法的原理是通过 label 标签包裹 radio，让 label 标签里面的元素具有选中性，在 input 标签后紧跟一个标签i，将 radio 通过定位等方式在视觉上偏移出去，i 设置为未选中的样式，input:checked+i 设置选中的样式。

注意：此方法不兼容IE6-8，在移动端和不考虑IE的情况下挺合适的。

如果是其他样式，类推即可，做法都是一样的。

复选框的模拟和单选框是一样的方法，这里就不演示了。