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

10多年專注成都網(wǎng)站制作，企業(yè)網(wǎng)站制作，個人網(wǎng)站制作服務(wù)，為大家分享網(wǎng)站制作知識、方案，網(wǎng)站設(shè)計流程、步驟,成功服務(wù)上千家企業(yè)。為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁設(shè)計及定制高端網(wǎng)站建設(shè)服務(wù),專注于企業(yè)網(wǎng)站制作,高端網(wǎng)頁制作,對成都餐廳設(shè)計等多個行業(yè)，擁有豐富的網(wǎng)站運維經(jīng)驗。

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

利用css3偽元素實現(xiàn)樣式修改

html代碼

web前端開發(fā)學(xué)習(xí)Q-q-u-n： 731771211，分享學(xué)習(xí)的方法和需要注意的小細節(jié)，不停更新最新的教程和學(xué)習(xí)方法（詳細的前端項目實戰(zhàn)教學(xué)視頻，PDF）
   <p>您的性別：</p>
    <div class="radio-sex">
        <input type="radio" id="sex1" name="sex">
        <label for="sex1"></label>
        <span>男</span>
    </div>
    <div class="radio-sex">
        <input type="radio" id="sex2" name="sex">
        <label for="sex2"></label> 女
    </div>

css樣式

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

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

.radio-sex label {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    /*注意層級關(guān)系，如果不把label層級設(shè)為最低，會遮擋住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)點：充分借助了CSS3的優(yōu)勢，無需使用js和圖片，僅用純CSS3就可搞定

缺點：兼容性較差，僅支持IE9+

案例：

利用圖片實現(xiàn)樣式修改

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

<input type="radio" name="type" id="adviceRadio1" value="1" checked hidden/>

2.借助label for標簽通過id綁定input ，這樣在點擊label時實際就是點擊了input

<input type="radio" name="type" id="adviceRadio1" value="1" checked hidden/>
                <label for="adviceRadio1" class="advice"></label>

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

web前端開發(fā)學(xué)習(xí)Q-q-u-n： 731771211，分享學(xué)習(xí)的方法和需要注意的小細節(jié)，不停更新最新的教程和學(xué)習(xí)方法（詳細的前端項目實戰(zhàn)教學(xué)視頻，PDF）

.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單選框的實現(xiàn)代碼，checkbox也是類似 將input type定義成checkbox即可

利用插件實現(xiàn)

awesome-bootstrap-checkbox插件

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

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

pretty.css

pretty.css是一款純css3漂亮的checkbox和radio美化效果。pretty.css可以和多種字體圖標結(jié)合使用，對原生的checkbox和radio進行美化，還可以制作按鈕點擊時的動畫效果。

插件下載：https://www.bootcdn.cn/pretty...

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

當前文章：web前端入門到實戰(zhàn)：總結(jié)如何修改美化radio、checkbox的默認樣式
本文路徑：http://jinyejixie.com/article32/iisjpc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、外貿(mào)建站、網(wǎng)站內(nèi)鏈、網(wǎng)站改版、網(wǎng)頁設(shè)計公司、營銷型網(wǎng)站建設(shè)

廣告

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