今天小编跟大家讲解下有关纯CSS改写radio和checkbox，单选框、复选框样式优化 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关纯CSS改写radio和checkbox，单选框、复选框样式优化 的相关资料，希望小伙伴们看了有所帮助。
input的单选框radio和复选框checkbox是样式是很难调的，设置背景和边框都不起效。
我们可以使用下面的方法进行样式美化：纯css就能实现。
html：
<h1>你喜欢我吗？</h1><labelfor="check1"><inputtype="checkbox"name="chk"id="check1"><span><span></span></span>喜欢</label><labelfor="check2"><inputtype="checkbox"name="chk"id="check2"><span><span></span></span>非常喜欢</label>css：
将单选框或者复选框隐藏，在其后面写一个span利用 css 的相邻兄弟选择器 input + span选中它，对它的样式进行美化。
<style>label{display:inline-block;width:100px;text-align:left;line-height:26px;}labelinput[type="checkbox"]{display:none;}labelinput[type="checkbox"]+span{box-sizing:border-box;display:inline-block;width:20px;height:20px;padding:2px;border:2pxsolid#ccc;vertical-align:sub;margin-right:5px;}labelinput[type="checkbox"]+span>span{display:inline-block;width:12px;height:12px;float:left;background:#33bb00;opacity:0;}labelinput[type="checkbox"]:checked+span{border-color:#33bb00;}label:hoverinput[type="checkbox"]+span>span{opacity:0.5;}labelinput[type="checkbox"]:checked+span>span{opacity:1;}</style>大功告成！如下图所示：
单选框也一样，只需要给span加一个圆角就可以啦！
labelinput[type="radio"]+span{border-radius:50%;}来源：爱蒂网
