在工作中，遇到单选框和复选框还是一件很头疼的事情。丑就算了，关键是各个浏览器都不一样，这非常让我头疼。
以前一直用JQUERY来解决这个问题。不过js解决复选框没有问题，解决单选框就有点拙荆见肘，需要写很长的代码，以至于我现在都忘记了该怎么写了。
今天在网上看到了有人用纯css的方式来解决这个问题，突然感觉拨云见月啊。经过我自己的学习整理，总结如下：
html结构：
代码语言：javascript复制<label class="FengCheck"><input name="radio" type="radio"><span></span></label>
<label class="FengCheck"><input name="check" type="checkbox"><span></span></label>这里给label加了一个样式名。主要是为了方便。而我非常喜欢把label包裹input和样式元素，这样避免了写一个for和id。
less 写法
代码语言：javascript复制.FengCheck {
input {display: none;}
input span {display: inline-block;width: 50px;height: 50px;background: #999;cursor: pointer;}
input[type="radio"] span {border-radius: 50%;}
input[type="checkbox"] span {border-radius: 10%;}
input[type="checkbox"]:checked span {background: #f60;}
input[type="radio"]:checked span {background: #f60;}
}当然，这个是用作演示的。实际工作中，肯定要用更加漂亮的图片去替代。那个是基本功，就不赘述了。
这种方式还真心是简单。效率也是杠杠的。
当然，这种需要用户点击的设计，一定要加上禁止选择样式，否则点来点去就反蓝了哦。
PS：这种方式是不兼容低版本IE的。不过，我是坚决不会再去做低版本IE的适配了。
