HTML的checkbox和radio的美化

发布时间:2021-12-17 发布网站:https://www.cnblogs.com/s0611163
前端之家收集整理的这篇文章主要介绍了HTML的checkbox和radio的美化前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

checkbox和radio的美化

checkbox:

HTML的checkbox和radio的美化

<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 '\2714'
            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:

HTML的checkbox和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的美化所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。