Pure CSS3 beautifies radio and checkbox_html/css_WEB-ITnose

As the title states, the effect of beautifying the radio and checkbox is mainly achieved through CSS3, but the compatibility is not very good. The PC only supports the Chrome browser (IE and Firefox tests are not possible, and there are no more tests on others). Then access to WeChat and QQ is also normal. Since the functions provided by LZ only need to be displayed on WeChat, we did not study them in depth.

Of course, although it is not compatible, there is still a need to explain why it is not compatible. The key lies in the problem of such a selector: input[type=radio]:before . The pseudo-class selector :beofre can insert some styles in P, span, div and other tags in mainstream browsers, but it cannot be used in input. Chrome simply supports this feature, and this example is based on this feature. development. Not much else to say, just the code and screenshots.

Screenshot of the effect:

HTML code:

<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"/>

Then the CSS code:

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

Copyright statement: This article is an original article by the blogger, No reproduction is allowed without the permission of the blogger.