纯CSS3美化radio和checkbox
如题,主要通过CSS3来实现将radio和checkbox美化的效果。可是兼容性并非非常好,PC端仅仅支持chrome浏览器(IE和Firefox測试不行,其它没有很多其它測试)。然后微信端和QQ端訪问也是正常。因为LZ所做的功能正好仅仅须要在微信端展示,所以并未深入研究。
然后再是CSS代码:
</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"/> <label for="test2">Test for test2 </label> <input class="radio" type="radio" ID="test2" name="test" value="test2"/> <br> <br> <br> <label for="check1">check1</label> <input id="check1" name="check" value="check1" type="checkbox" class="checkbox"/> <label for="check2">check2</label> <input id="check2" name="check" value="check2" type="checkbox" class="checkbox"/> <label for="check3">check3</label> <input id="check3" name="check" value="check3" type="checkbox" class="checkbox"/> <label for="check4">check4</label> <input id="check4" name="check" value="check4" type="checkbox" class="checkbox"/>
然后再是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; }
posted on 2017-07-23 12:00 cynchanpin 阅读(3207) 评论(0) 编辑 收藏 举报