如题，主要通过CSS3来实现将radio和checkbox美化的效果。可是兼容性并非非常好，PC端仅仅支持chrome浏览器（IE和Firefox測试不行，其它没有很多其它測试）。然后微信端和QQ端訪问也是正常。因为LZ所做的功能正好仅仅须要在微信端展示，所以并未深入研究。

</span>

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

其它不多说，直接上代码和截图。

效果截图：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

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;

        }