這篇文章主要介紹利用CSS3美化單選框 radio 、多選框 checkbox 和 switch開(kāi)關(guān)按鈕的方法，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)是專(zhuān)業(yè)的錫林郭勒盟網(wǎng)站建設(shè)公司，錫林郭勒盟接單;提供成都做網(wǎng)站、成都網(wǎng)站建設(shè)、成都外貿(mào)網(wǎng)站建設(shè),網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專(zhuān)業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行錫林郭勒盟網(wǎng)站開(kāi)發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專(zhuān)業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專(zhuān)業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!

很多時(shí)候我們需要美化單選框 radio 和多選框 checkbox ，因?yàn)樵臉邮奖容^丑陋，而且表現(xiàn)不統(tǒng)一。CSS3之前一般用 js 來(lái)模擬，而如今完全可以用純CSS實(shí)現(xiàn)radio和checkbox的美化。對(duì)于移動(dòng)端很早就寫(xiě)過(guò)相關(guān)的模擬樣式：一個(gè)適合移動(dòng)端的checkbox 和 css3實(shí)現(xiàn)的switch開(kāi)關(guān)按鈕 。這兩篇文章僅僅支持移動(dòng)端的頁(yè)面，而 webkit 上也正好支持單標(biāo)記的 input 元素是使用偽類(lèi)（：before或：after）。最近做PC端項(xiàng)目，考慮到兼容更多的PC瀏覽器，所以在這基礎(chǔ)上作了一些改進(jìn)。

先來(lái)看看效果：

再來(lái)看一下HTML結(jié)構(gòu)：

html 代碼：

<label class="bui-radios-label bui-radios-anim">
<input type="radio" name="sex"/><i class="bui-radios"></i> 男
</label>

這個(gè)結(jié)構(gòu)有一個(gè) label 標(biāo)簽，其中包含 input 元素和 i 元素。基本的原理是：首先使用 visibility: hidden; opacity: 0; 將 input 元素 “隱藏” 起來(lái)，利用 label 標(biāo)簽的特性，在點(diǎn)擊時(shí)將 input 元素選中或取消選中。 i 元素結(jié)合偽類(lèi)（：before或：after）模擬單選框 radio 和多選框 checkbox 的外觀(guān)。

最后看看CSS代碼：

css 代碼：

/* radio */
label.bui-radios-label input {
position: absolute;
opacity: 0;
visibility: hidden;
}
label.bui-radios-label .bui-radios {
display: inline-block;
position: relative;
width: 13px;
height: 13px;
background: #FFFFFF;
border: 1px solid #979797;
border-radius: 50%;
vertical-align: -2px;
}
label.bui-radios-label input:checked + .bui-radios:after {
position: absolute;
content: "";
width: 7px;
height: 7px;
background-color: #fff;
border-radius: 50%;
top: 3px;
left: 3px;
}
label.bui-radios-label input:checked + .bui-radios {
background: #00B066;
border: 1px solid #00B066;
}
label.bui-radios-label input:disabled + .bui-radios {
background-color: #e8e8e8;
border: solid 1px #979797;
}
label.bui-radios-label input:disabled:checked + .bui-radios:after {
background-color: #c1c1c1;
}
label.bui-radios-label.bui-radios-anim .bui-radios {
-webkit-transition: background-color ease-out .3s;
transition: background-color ease-out .3s;
}

這里有幾點(diǎn)需要說(shuō)明的是：

1. checkbox 中的 勾勾使用了iconfont，當(dāng)然你可以改下圖片，或用偽類(lèi)（：before或：after）模擬。

2. 添加了一些簡(jiǎn)單的過(guò)渡效果 或 背景動(dòng)畫(huà)。

3. 特別重要的一點(diǎn)是：利用 label 標(biāo)簽的特性，對(duì)于HTML基礎(chǔ)不好同學(xué)來(lái)說(shuō)，請(qǐng)先了解一下 label 標(biāo)簽的特性。

以上是利用CSS3美化單選框 radio 、多選框 checkbox 和 switch開(kāi)關(guān)按鈕的方法的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站題目：利用CSS3美化單選框radio、多選框checkbox和switch開(kāi)關(guān)按鈕的方法
當(dāng)前路徑：http://www.chinadenli.net/article10/peghgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、App開(kāi)發(fā)、網(wǎng)站建設(shè)、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化、虛擬主機(jī)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)