明辉手游网中心：是一个免费提供流行视频软件教程、在线学习分享的学习平台！

资讯首页腾讯视频爱奇艺暴风影音酷狗音乐酷我音乐影音大全软件下载软件教程电脑系统下载

聊天工具办公软件杀毒教程系统工具图形图像电脑学习应用软件网络软件苹果应用注册码网站教程技术开发安卓教程其它教程

您当前所在位置：网视手游站 -> 网站教程 -> HTML的checkbox与radio怎么美化样式

HTML的checkbox与radio怎么美化样式

发表时间：2024-05-07 来源：明辉站整理相关软件相关文章人气：

[摘要]这次给大家带来HTML的checkbox和radio怎样美化样式，HTML的checkbox和radio美化样式的注意事项有哪些，下面就是实战案例，一起来看一下。HTML的checkbox和radio样式美化的简单实例checkbox：<style type="text/css&q...

这次给大家带来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中文网其它相关文章！

相关阅读：

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

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

HTML的语法详解

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

网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。

标签：HTML的checkbox与radio怎样美化样式

上一篇：h5与c3怎么做出太阳系行星运转的动画效果

下一篇：html对于PHP你必须知道的重要知识点

推荐资讯总人气榜

最新教程本月人气

相关文章