HTML的checkbox和radio怎样美化样式

这次给大家带来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>

相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

相关阅读：

空心菜的米库

1，对界面进行了美化2，对文件里边相同代码进行了综合3，增加了点击次数统计，并对3次点击以上的域名增加热门字样4，对本站出售和个人出售进行了划分5，增加钻石状态说明6，增加了完整的后台界面7，增加对资料修改功能8，增加回收站，可以任意删除域名、恢复删除域名和永久删除数据9，还有其他的细节大家自己看~10.增加域名证书显示11.域名到期时间采用日历控件形式12.后台登陆添加了验证码功能13.还有很多

下载

立即学习“前端免费学习笔记（深入）”；

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

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

HTML的语法详解