php checkbox美化,纯CSS3美化radio和checkbox_html/css_WEB-ITnose

如题，主要通过CSS3来实现将radio和checkbox美化的效果，但是兼容性并不是很好，PC端只支持chrome浏览器(IE和Firefox测试不行，其他没有更多测试)。然后微信端和QQ端访问也是正常。由于LZ所做的功能正好只需要在微信端展示，所以并未深入研究。

当然，虽然说不能兼容，但是对于为什么不能兼容还是需要解释一下的，其关键在于这么个选择器的问题：input[type=radio]:before。:beofre这个伪类选择器在主流浏览器中可以在P,span,div等标签插入一些式样，但是在input中就不行，索性chrome支持这一特性，而本实例也正是围绕着一特性进行开发。其他不多说，直接上代码和截图。

效果截图：

HTML代码：

Test for test1 Test for test2

check1 check2 check3 check4

然后再是CSS代码：

input[type=radio]{ font-size:1em; visibility: hidden; position: relative; display: inline-block; width: 1em; height: 1em; } input[type=radio]:before{ font-size:1em; top:12%; display: inline-block; position: absolute; content:' '; visibility: visible; height: 1em; width: 1em; display: block; background: url("../img/no.png") no-repeat; background-size: 1em 1em; } input[type=radio]:checked:before{ font-size:1em; content:' '; visibility: visible; height: 1em; width: 1em; background: url("../img/yes.png") no-repeat; background-size: 1em 1em; } input[type=checkbox]{ font-size:1em; visibility: hidden; position: relative; display: inline-block; width: 1em; height: 1em; } input[type=checkbox]:before{ top:12%; display: inline-block; position: absolute; content:' '; visibility: visible; height: 1em; width: 1em; display: block; background: url("../img/checkbox_no.png") no-repeat; background-size: 1em 1em; } input[type=checkbox]:checked:before{ content:' '; visibility: visible; height: 1em; width: 1em; background: url("../img/checkbox.png") no-repeat; background-size: 1em 1em; }

版权声明：本文为博主原创文章，未经博主允许不得转载。

本文原创发布php中文网，转载请注明出处，感谢您的尊重！