摘要：現(xiàn)在前端頁(yè)面效果日益豐富，默認(rèn)的組件樣式顯然不能滿足設(shè)計(jì)需求。前段時(shí)間開(kāi)發(fā)項(xiàng)目中剛好接觸到相關(guān)的需求，在此特地整理下修改樣式的方法。它使用純編寫(xiě)，沒(méi)有任何的文件。

現(xiàn)在前端頁(yè)面效果日益豐富，默認(rèn)的input組件樣式顯然不能滿足設(shè)計(jì)需求。前段時(shí)間開(kāi)發(fā)項(xiàng)目中剛好接觸到相關(guān)的需求，在此特地整理下修改radio、CheckBox樣式的方法。

原理：大致原理都是使用原生的checkbox或input標(biāo)簽，在其后面設(shè)置相關(guān)聯(lián)的label元素。給元素設(shè)置為透明，然后通過(guò)定位讓用戶看到的是元素，利用css的原生屬性來(lái)判斷用戶的操作，設(shè)置選中后的label樣式,即input[type=checkbox]:checked+label{}

html代碼

   
您的性別：
    

        
        
        男
    
    

        
         女
    

css樣式

.radio-sex {
    position: relative;
    display: inline-block;
    margin-right: 12px;
}

.radio-sex input {
    vertical-align: middle;
    margin-top: -2px;
    margin-bottom: 1px;
    /* 前面三行代碼是為了讓radio單選按鈕與文字對(duì)齊 */
    width: 20px;
    height: 20px;
    appearance: none;/*清楚默認(rèn)樣式*/
    -webkit-appearance: none;
    opacity: 0;
    outline: none;
    /* 注意不能設(shè)置為display:none*/
}

.radio-sex label {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    /*注意層級(jí)關(guān)系，如果不把label層級(jí)設(shè)為最低，會(huì)遮擋住input而不能單選*/
    width: 20px;
    height: 20px;
    border: 1px solid #3582E9;
    border-radius: 100%;
}

.radio-sex input:checked+label {
    background: #3582E9;
}

.radio-sex input:checked+label::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 2px;
    width: 5px;
    height: 12px;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    transform: rotate(45deg);
}

優(yōu)點(diǎn)：充分借助了CSS3的優(yōu)勢(shì)，無(wú)需使用js和圖片，僅用純CSS3就可搞定

缺點(diǎn)：兼容性較差，僅支持IE9+

案例：

實(shí)現(xiàn)思路
1.設(shè)置input 屬性hidden對(duì)該input進(jìn)行隱藏

2.借助label for標(biāo)簽通過(guò)id綁定input ，這樣在點(diǎn)擊label時(shí)實(shí)際就是點(diǎn)擊了input

3.定義label的樣式，設(shè)置未選中狀態(tài)的背景圖

.advice{
                    height: 12px;
                    width: 12px;
                    display: inline-block;
                    background-image: url("https://caiyunupload.b0.upaiyun.com/newweb/imgs/icon-unchecked.png");
                    background-repeat: no-repeat;
                    background-position: center;
                    vertical-align: middle;
                    margin-top: -4px;
                }

4.使用相鄰選擇器設(shè)置選中狀態(tài)label的樣式

input[type="radio"]:checked + .advice{
                    background-image: url("https://caiyunupload.b0.upaiyun.com/newweb/imgs/icon-checked.png");
                }

以上是radio單選框的實(shí)現(xiàn)代碼，checkbox也是類(lèi)似 將input type定義成checkbox即可

awesome-bootstrap-checkbox是一款可以美化Bootstrap復(fù)選框和單選按鈕的插件。它使用純CSS編寫(xiě)，沒(méi)有任何的javascript文件。它通過(guò)在原生Bootstrap組件的基礎(chǔ)上做一些小改動(dòng)，即可完成漂亮的美化效果。

演示地址：http://awesome-bootstrap-chec...
插件下載：https://www.bootcdn.cn/awesom...
注：需要引入awesome-bootstrap-checkbox.css、font-awesome.css以及font awesome對(duì)應(yīng)的字體font文件

pretty.css是一款純css3漂亮的checkbox和radio美化效果。pretty.css可以和多種字體圖標(biāo)結(jié)合使用，對(duì)原生的checkbox和radio進(jìn)行美化，還可以制作按鈕點(diǎn)擊時(shí)的動(dòng)畫(huà)效果。

演示地址：http://www.htmleaf.com/Demo/2...
插件下載：https://www.bootcdn.cn/pretty...

小編知道的方法先介紹到這里，大家如有更好的方法歡迎留言討論。