利用CSS3美化單選框 radio 、多選框 checkbox 和 switch開關按鈕的方法

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

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

先來看看效果：

再來看一下HTML結構：

html 代碼：

<label class="bui-radios-label bui-radios-anim">
<input type="radio" name="sex"/><i class="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-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;
}

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

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

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

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

以上是利用CSS3美化單選框 radio 、多選框 checkbox 和 switch開關按鈕的方法的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！