明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學習分享的學習平臺！

HTML的checkbox與radio如何美化樣式

發(fā)表時間：2023-09-22 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]這次給大家?guī)鞨TML的checkbox和radio怎樣美化樣式，HTML的checkbox和radio美化樣式的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。HTML的checkbox和radio樣式美化的簡單實例checkbox：<style type="text/css&q...
這次給大家?guī)鞨TML的checkbox和radio怎樣美化樣式，HTML的checkbox和radio美化樣式的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。

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復制內(nèi)容到剪貼板
<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>

相信看了這些案例你已經(jīng)掌握了方法，更多精彩請關(guān)注php中文網(wǎng)其它相關(guān)文章！

相關(guān)閱讀：

h5和c3怎樣做出太陽系行星運轉(zhuǎn)的動畫效果

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

HTML的語法詳解

以上就是HTML的checkbox和radio怎樣美化樣式的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設是一個廣義的術(shù)語，涵蓋了許多不同的技能和學科中所使用的生產(chǎn)和維護的網(wǎng)站。