纯CSS3美化radio和checkbox_html/css_WEB-ITnose

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

效果截图：

HTML代码：

Test for test1                 Test for test2                 
        
        
        check1                check2                check3                check4        

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;        }

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