使用css3修改input[type=radio]样式

使用css3修改input[type=radio]样式制作项目时，需要使用单选按钮input[type=radio]，但是默认样式与UI设计不一致，需要修改默认样式，如下图。搜索的时候发现有些实现是使用背景图片实现的。我不想用图片，所以我用css3重新实现了。ie8下无效。原理是利用标签关联对应的，为设置透明度，利用position（定位）让用户看到标签的样式。当点击时，会选中对应的，使用的:checked伪类选择器改变选中的的样式。实现代码html

Option1

选项2

cssdiv{position:relative;行高：30px；}input[type="radio"]{宽度：20px；高度：20px；不透明度：0；}标签{位置：绝对；左：5px；顶部：3px；r-半径：50%；边框：1px实心#999；}/*设置选中输入的样式*//*+是兄弟选择器，获取选中标签元素*/input:checked+label{background-color:#fe6d32;边框：1px实心#fe6d32；}input:checked+label::after{position:absolute;内容：””;宽度：5px；高度：10px；顶部：3px；左：6px；边框：2px实心#fff；边框顶部：无；左边框：无；transform:rotate(45deg)}dome链接：http://runjs.cn/code/hmevb9gs