怎么用CSS3美化單選框和多選框

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

　　很多時候我們需要美化單選框radio和多選框checkbox，因為原生的樣式比較丑陋，而且表現不統一。CSS3之前一般用js來模擬，而如今完全可以用純CSS實現radio和checkbox的美化。對于移動端很早就寫過相關的模擬樣式：一個適合移動端的checkbox和css3實現的switch開關按鈕。這兩篇文章僅僅支持移動端的頁面，而webkit上也正好支持單標記的input元素是使用偽類（：before或：after）。最近做PC端項目，考慮到兼容更多的PC瀏覽器，所以在這基礎上作了一些改進。

　　看一下HTML結構：

　　html代碼：

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

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

　　</label>

　　這個結構有一個label標簽，其中包含input元素和i元素。基本的原理是：首先使用visibility:hidden;opacity:0;將input元素“隱藏”起來，利用label標簽的特性，在點擊時將input元素選中或取消選中。i元素結合偽類（：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;

　　}

　　這里有幾點需要說明的是：

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

　　2.添加了一些簡單的過渡效果或背景動畫。

　　3.特別重要的一點是：利用label標簽的特性，對于HTML基礎不好同學來說，請先了解一下label標簽的特性。

到此，關于“怎么用CSS3美化單選框和多選框”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！