HTML的checkbox和radio的美化

概述checkbox和radio的美化checkbox： 测试101 ...

checkBox和radio的美化

checkBox：

<style type="text/CSS">    input[type="checkBox"]    {        display: none;    }        input[type="checkBox"] + label                    display inline-block;            position relative            border solID 2px #99a1a7            wIDth 35px            height            line-height            border-radius 4px;                input[type="checkBox"]:checked + label:after                    content '14'            Font-size 25px            color #99a1a7 absolute            text-align center            background-color #e9ecee    .tab            margin-top 20px        margin-bottom        wIDth 100%        .tab td         solID 1px #f99 39px}</style>table class="tab" cellpadding="0" cellspacing style="border-collapse: collapse;">    tr>        td>            div align="center"="float: left; height: 39px; wIDth: 39px;">                input ID="ck101" type="checkBox" />                label for="ck101"></labeldiv="float: left; height: 39px; line-height: 39px; Font-size: 25px; margin-left: 10px; margin-right: 20px;">                测试101            ="ck102"="ck102"                测试102                        测试        td ="text-align: center;"="display: inline-block;">                    ="ck103"/>                    ="ck103"                    测试103                ="ck104"="ck104"                    测试104                                测试            测试        >table="border: solID 1px #f99; height: 39px; margin-top: 20px; margin-bottom: 20px;"="ck201"/>        ="ck201"        测试201    ="ck202"="ck202"="float: left; height: 39px; line-height: 39px; Font-size: 25px; margin-left: 10px;"        测试202    >

VIEw Code

radio：

    input[type="radio"]            input[type="radio"] + label                    padding 5px 19.5px        input[type="radio"]:checked + label:after         ' ' 12.5px        input[type="radio"]:checked + label        ="rd101" name="rd"="radio" ="rd101"="rd102"="rd102"="rd103"="rd103"="rd104"="rd104"="rd201"="rd201"="rd202"="rd202">

VIEw Code

 效果图：

总结

以上是内存溢出为你收集整理的HTML的checkbox和radio的美化全部内容，希望文章能够帮你解决HTML的checkbox和radio的美化所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。