HTML的checkbox與radio如何美化樣式
發(fā)表時(shí)間：2023-09-22 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]這次給大家?guī)鞨TML的checkbox和radio怎樣美化樣式，HTML的checkbox和radio美化樣式的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。HTML的checkbox和radio樣式美化的簡(jiǎn)單實(shí)例checkbox：<style type="text/css&q...
這次給大家?guī)鞨TML的checkbox和radio怎樣美化樣式，HTML的checkbox和radio美化樣式的
注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。
HTML的checkbox和radio樣式美化的簡(jiǎn)單實(shí)例
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;">
測(cè)試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;">
測(cè)試102
</div>
測(cè)試
</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;">
測(cè)試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;">
測(cè)試104
</div>
測(cè)試
</div>
</td>
<td>測(cè)試
</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;">
測(cè)試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;">
測(cè)試202
</div>
</div>
radio：
XML/HTML Code復(fù)制內(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;">
測(cè)試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;">
測(cè)試102
</div>
測(cè)試
</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;">
測(cè)試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;">
測(cè)試104
</div>
測(cè)試
</div>
</td>
<td>測(cè)試
</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;">
測(cè)試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;">
測(cè)試202
</div>
</div>相信看了這些案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
相關(guān)閱讀：
h5和c3怎樣做出太陽(yáng)系行星運(yùn)轉(zhuǎn)的動(dòng)畫效果
css怎樣固定div或者table在指定位置
HTML的語(yǔ)法詳解
以上就是HTML的checkbox和radio怎樣美化樣式的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ)，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。
