純CSS3美化radio和checkbox

標籤：hid   text   iss   ext   fill   code   inpu   ref   chrome瀏覽器   

如題，主要通過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" >

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

純CSS3美化radio和checkbox