如题,主要通过CSS3来实现将radio和checkbox美化的效果,但是兼容性并不是很好,PC端只支持chrome浏览器(IE和Firefox测试不行,其他没有更多测试)。然后微信端和QQ端访问也是正常。由于LZ所做的功能正好只需要在微信端展示,所以并未深入研究。</span>
当然,虽然说不能兼容,但是对于为什么不能兼容还是需要解释一下的,其关键在于这么个选择器的问题:input[type=radio]:before。:beofre这个伪类选择器在主流浏览器中可以在P,span,div等标签插入一些式样,但是在input中就不行,索性chrome支持这一特性,而本实例也正是围绕着一特性进行开发。其他不多说,直接上代码和截图。
效果截图:
HTML代码:
<label for="test1">Test for test1 </label>
<input class="radio" type="radio" ID="test1" name="test" value="test1"/>