纯css自定义优化checkbox和radio标签

网页开发中经常用到checkbox（复选框）和radio（单选框），由于浏览器自带样式比较不美观，而且不同浏览器样式也不经相同，如果想要在不同浏览器都显示效果相同，就必须重置他们的样式！

这里介绍利用纯css对复选框和单选框进行修改的方法，当然大家也可以尝试用js的方法修改，利用纯css存在兼容问题，在IE9及以上才能正常显示，支持谷歌、火狐等主流浏览器。

实现原理：添加一个label标签，然后在标签里添加input和一个span标签，默认然input标签隐藏，span做成checkbox或radio样式（加载图片），然后利用：checked伪类选择器控制按钮是否选中，选中需要切换下span的图片。

HTML代码：

复选框

<label>
<input type="checkbox"><span class="style"></span>英特网络Check
</label>
<label>
<input type="checkbox"><span class="style"></span>英特网络Check
</label>

单选框

<label>
<input type="radio" name="bd"><span></span>英特网络radio
</label>
<label>
<input type="radio" name="bd" checked=""><span></span>英特网络radio
</label>

CSS代码

/*复选框（多选框）的美化CSS*/

input[type="checkbox"]{appearance: none; -webkit-appearance: none;outline: none;display:none}
label{display:inline-block;cursor:pointer;}
input[type="checkbox"]+span{width:16px;height:16px;display:inline-block;background:url(radio.png)  no-repeat;background-position:0 0;background-size:16px 32px;}
input[type="checkbox"]:checked + span{background-position:0 -16px}
/*单选框的美化CSS*/
input[type="radio"]{appearance: none; -webkit-appearance: none;outline: none;display:none}
label{display:inline-block;cursor:pointer;}
input[type="radio"] + span{width:16px;height:16px;display:inline-block;background:url(radio.png)  no-repeat;background-size:16px 32px;background-position:0px -16px;}
label input[type="radio"]:checked + span{background-position:0 0}

这样就可以实现对checkbox和radio的优化！

实际使用时可以自行修改图片，来达到自己想要的效果；在手机端开发时，该效果均可以正常显示，但是由于手机端像素比的问题，图片容易虚化，需要将图片比在pc端的像素至少2倍以上，同时建议将选中和未选中分别放在一张图中，减少很多因像素比引起的其他问题。

效果演示：www.intewl.com/demo/ui/radiocheck/index.html

代码下载：https://pan.baidu.com/s/1UqYw4jmUK_XZodcQnXY7fQ