Bootstrap復(fù)選框和單選按鈕美化插件(推薦)
更新時間：2016年11月23日 17:06:36 作者：HCY__SH
這篇文章主要介紹了Bootstrap復(fù)選框和單選按鈕美化插件的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
需要引入awesome-bootstrap-checkbox.css、font-awesome.css以及font awesome對應(yīng)的字體font文件，可在上面的網(wǎng)站上下載。
checkboxs的樣式
radio的樣式
radio樣式
只要引入上面所說的文件之后，也可以自己定制樣式，代碼如下：
.checkbox label::before {
content: "";
display: inline-block;
position: absolute;
width: 20px;
height: 20px;
left: 0;
margin-left: -20px;
border: 1px solid #cccccc;<!--沒選中時的邊框顏色-->
border-radius: 3px;
background-color: #fff;<!--沒選中時的顏色-->
-webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
-o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}
.checkbox label::after {
display: inline-block;
position: absolute;
width: 16px;
height: 16px;
left: 0;
top: 0;
margin-left: -19px;<!--可以改變“√”的位置-->
padding-left: 3px;<!--可以改變“√”的位置-->
padding-top: 1px;<!--可以改變“√”的位置-->
font-size: 13px;<!--選中后的中間打鉤的字體大?。ㄗ煮w越大中間的勾越大越明顯）-->
color: #FAD500;<!--選中后的中間打鉤的顏色-->
}
.checkbox input[type="checkbox"],
.checkbox input[type="radio"] {
opacity: 0;
z-index: 1;
}
.checkbox input[type="checkbox"]:focus + label::before,
.checkbox input[type="radio"]:focus + label::before {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
background-color: black;
border-color: black;
}
.checkbox input[type="checkbox"]:checked + label::before,
.checkbox input[type="radio"]:checked + label::before {
background-color: black;<!--選中后的背景顏色-->
border-color: black;<!--選中后的邊框顏色-->
}
.checkbox input[type="checkbox"]:checked + label::after,
.checkbox input[type="radio"]:checked + label::after {
font-family: "FontAwesome";
content: "\f00c";
}
.checkbox input[type="checkbox"]:disabled + label,
.checkbox input[type="radio"]:disabled + label {
opacity: 0.65;
}
.checkbox input[type="checkbox"]:disabled + label::before,
.checkbox input[type="radio"]:disabled + label::before {
background-color: #eeeeee;
cursor: not-allowed;
}
.checkbox.checkbox-circle label::before {
border-radius: 50%;
<div>
<div class="checkbox checkbox-circle">
<input id="radio1" class="styled" type="radio" name="radio">
<label for="radio1" class="font-bolder">
radio1
</label>
</div>
<div class="checkbox checkbox-circle">
<input id="radio2" class="styled" type="radio" name="radio">
<label for="radio2" class="font-bolder">
raido2
</label>
</div>
</div>
上面代碼執(zhí)行的效果
以上所述是小編給大家介紹的Bootstrap復(fù)選框和單選按鈕美化插件，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
Handtrack.js庫實(shí)現(xiàn)實(shí)時監(jiān)測手部運(yùn)動(推薦)
這篇文章主要介紹了實(shí)時監(jiān)測手部運(yùn)動的 JS 庫，可以實(shí)現(xiàn)很多有趣功能,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-02-02
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)煙花效果，實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊出現(xiàn)模擬煙花爆炸的特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
用jscript實(shí)現(xiàn)新建word文檔...2007-06-06
這篇文章主要介紹了JS hashMap實(shí)例詳解的相關(guān)資料，包括刪除鍵值、獲取鍵值的相關(guān)知識，非常不錯具有參考借鑒價值,需要的朋友一起看看吧2016-05-05
數(shù)組去重復(fù)是一個常見的需求，我們暫時考慮同類型的數(shù)組去重復(fù)。主要是理清思路和考慮下性能。以下方法，網(wǎng)上基本都有，這里只是簡單地總結(jié)一下分享給大家。2015-04-04
xmlHTTP返回值重編碼的優(yōu)化...2006-11-11
詳解axios跨端架構(gòu)是如何實(shí)現(xiàn)的
我們都知道,axios 是是一個跨平臺請求方案,在瀏覽器端采用 XMLHttpRequest API 進(jìn)行封裝,而在 Node.js 端則采用 http/https 模塊進(jìn)行封裝,那么本文,我們將來探討這個話題：axios 的跨端架構(gòu)是如何實(shí)現(xiàn)的,需要的朋友可以參考下2024-04-04
js中console在一行內(nèi)打印字符串和對象的方法
這篇文章主要介紹了js中console在一行內(nèi)打印字符串和對象的方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
JavaScript設(shè)計模式經(jīng)典之工廠模式
工廠模式定義一個用于創(chuàng)建對象的接口，這個接口由子類決定實(shí)例化哪一個類。接下來通過本文給大家介紹JavaScript設(shè)計模式經(jīng)典之工廠模式，感興趣的朋友一起學(xué)習(xí)吧2016-02-02
如何基于小程序?qū)崿F(xiàn)發(fā)送語音消息及轉(zhuǎn)文字功能
最近為小程序增加語音識別轉(zhuǎn)文字的功能,坑路不斷,特此記錄,下面這篇文章主要給大家介紹了關(guān)于如何基于小程序?qū)崿F(xiàn)發(fā)送語音消息及轉(zhuǎn)文字功能的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11