欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

HTML的checkbox和radio怎样美化样式

程序员文章站 2022-04-09 11:14:09
...
这次给大家带来HTML的checkbox和radio怎样美化样式,HTML的checkbox和radio美化样式的注意事项有哪些,下面就是实战案例,一起来看一下。

HTML的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: 35px;   
            line-height: 35px;   
            border-radius: 4px;   
        }   
  
        input[type="checkbox"]:checked + label:after   
        {   
            content: '\2714';   
            font-size: 25px;   
            color: #99a1a7;   
            width: 35px;   
            height: 35px;   
            line-height: 35px;   
            position: absolute;   
            text-align: center;   
            background-color: #e9ecee;   
        }   
  
    .tab   
    {   
        margin-top: 20px;   
        margin-bottom: 20px;   
        width: 100%;   
    }   
  
        .tab td   
        {   
            border: solid 1px #f99;   
            font-size: 25px;   
            line-height: 39px;   
        }   
</style>  
  
<table class="tab" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">  
    <tr>  
        <td>  
            <div align="center" style="float: left; height: 39px; width: 39px;">  
                <input id="ck101" type="checkbox" />  
                <label for="ck101"></label>  
            </div>  
            <div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">  
                测试101   
            </div>  
            <div align="center" style="float: left; height: 39px; width: 39px;">  
                <input id="ck102" type="checkbox" />  
                <label for="ck102"></label>  
            </div>  
            <div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">  
                测试102   
            </div>  
            测试   
        </td>  
        <td></td>  
    </tr>  
    <tr>  
        <td style="text-align: center;">  
            <div style="display: inline-block;">  
                <div align="center" style="float: left; height: 39px; width: 39px;">  
                    <input id="ck103" type="checkbox" />  
                    <label for="ck103"></label>  
                </div>  
                <div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">  
                    测试103   
                </div>  
                <div align="center" style="float: left; height: 39px; width: 39px;">  
                    <input id="ck104" type="checkbox" />  
                    <label for="ck104"></label>  
                </div>  
                <div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">  
                    测试104   
                </div>  
                测试   
            </div>  
        </td>  
        <td>测试   
        </td>  
    </tr>  
</table>  
  
<div style="border: solid 1px #f99; height: 39px; margin-top: 20px; margin-bottom: 20px;">  
    <div align="center" style="float: left; height: 39px; width: 39px;">  
        <input id="ck201" type="checkbox" />  
        <label for="ck201"></label>  
    </div>  
    <div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">  
        测试201   
    </div>  
    <div align="center" style="float: left; height: 39px; width: 39px;">  
        <input id="ck202" type="checkbox" />  
        <label for="ck202"></label>  
    </div>  
    <div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px;">  
        测试202   
    </div>  
</div>  
radio:
XML/HTML Code复制内容到剪贴板
<style type="text/css">  
    input[type="radio"]   
    {   
        display: none;   
    }   
  
        input[type="radio"] + label   
        {   
            display: inline-block;   
            position: relative;   
            border: solid 2px #99a1a7;   
            width: 25px;   
            height: 25px;   
            line-height: 25px;   
            padding: 5px;   
            border-radius: 19.5px;   
        }   
  
        input[type="radio"]:checked + label:after   
        {   
            content: ' ';   
            font-size: 25px;   
            color: #99a1a7;   
            width: 25px;   
            height: 25px;   
            line-height: 25px;   
            position: absolute;   
            text-align: center;   
            background-color: #99a1a7;   
            border-radius: 12.5px;   
        }   
  
        input[type="radio"]:checked + label   
        {   
            background-color: #e9ecee;   
        }   
  
    .tab   
    {   
        margin-top: 20px;   
        margin-bottom: 20px;   
        width: 100%;   
    }   
  
        .tab td   
        {   
            border: solid 1px #f99;   
            font-size: 25px;   
            line-height: 39px;   
        }   
</style>  
  
<table class="tab" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">  
    <tr>  
        <td>  
            <div align="center" style="float: left; height: 39px; width: 39px;">  
                <input id="rd101" name="rd" type="radio" />  
                <label for="rd101"></label>  
            </div>  
            <div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">  
                测试101   
            </div>  
            <div align="center" style="float: left; height: 39px; width: 39px;">  
                <input id="rd102" name="rd" type="radio" />  
                <label for="rd102"></label>  
            </div>  
            <div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">  
                测试102   
            </div>  
            测试   
        </td>  
        <td></td>  
    </tr>  
    <tr>  
        <td style="text-align: center;">  
            <div style="display: inline-block;">  
                <div align="center" style="float: left; height: 39px; width: 39px;">  
                    <input id="rd103" name="rd" type="radio" />  
                    <label for="rd103"></label>  
                </div>  
                <div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">  
                    测试103   
                </div>  
                <div align="center" style="float: left; height: 39px; width: 39px;">  
                    <input id="rd104" name="rd" type="radio" />  
                    <label for="rd104"></label>  
                </div>  
                <div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">  
                    测试104   
                </div>  
                测试   
            </div>  
        </td>  
        <td>测试   
        </td>  
    </tr>  
</table>  
  
<div style="border: solid 1px #f99; height: 39px; margin-top: 20px; margin-bottom: 20px;">  
    <div align="center" style="float: left; height: 39px; width: 39px;">  
        <input id="rd201" name="rd" type="radio" />  
        <label for="rd201"></label>  
    </div>  
    <div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">  
        测试201   
    </div>  
    <div align="center" style="float: left; height: 39px; width: 39px;">  
        <input id="rd202" name="rd" type="radio" />  
        <label for="rd202"></label>  
    </div>  
    <div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px;">  
        测试202   
    </div>  
</div>

相信看了这些案例你已经掌握了方法,更多精彩请关注其它相关文章!

相关阅读:

h5和c3怎样做出太阳系行星运转的动画效果

css怎样固定div或者table在指定位置

HTML的语法详解

以上就是HTML的checkbox和radio怎样美化样式的详细内容,更多请关注其它相关文章!