這篇文章主要介紹“怎么用CSS3美化單選框和多選框”，在日常操作中，相信很多人在怎么用CSS3美化單選框和多選框問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”怎么用CSS3美化單選框和多選框”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

目前創(chuàng)新互聯(lián)已為成百上千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬空間、網(wǎng)站托管維護(hù)、企業(yè)網(wǎng)站設(shè)計(jì)、鄆城網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

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

看一下HTML結(jié)構(gòu)：

html代碼：

<labelclass="bui-radios-labelbui-radios-anim">

<inputtype="radio"name="sex"/><iclass="bui-radios"></i>男

</label>

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

最后看看CSS代碼：

css代碼：

/*radio*/

label.bui-radios-labelinput{

position:absolute;

opacity:0;

visibility:hidden;

}

label.bui-radios-label.bui-radios{

display:inline-block;

position:relative;

width:13px;

height:13px;

background:#FFFFFF;

border:1pxsolid#979797;

border-radius:50%;

vertical-align:-2px;

}

label.bui-radios-labelinput:checked+.bui-radios:after{

position:absolute;

content:"";

width:7px;

height:7px;

background-color:#fff;

border-radius:50%;

top:3px;

left:3px;

}

label.bui-radios-labelinput:checked+.bui-radios{

background:#00B066;

border:1pxsolid#00B066;

}

label.bui-radios-labelinput:disabled+.bui-radios{

background-color:#e8e8e8;

border:solid1px#979797;

}

label.bui-radios-labelinput:disabled:checked+.bui-radios:after{

background-color:#c1c1c1;

}

label.bui-radios-label.bui-radios-anim.bui-radios{

-webkit-transition:background-colorease-out.3s;

transition:background-colorease-out.3s;

}

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

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

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

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

到此，關(guān)于“怎么用CSS3美化單選框和多選框”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！

本文名稱：怎么用CSS3美化單選框和多選框
網(wǎng)站網(wǎng)址：http://www.chinadenli.net/article12/gooidc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、全網(wǎng)營(yíng)銷推廣、網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、App開發(fā)、小程序開發(fā)

廣告

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