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

一、利用css3偽元素實現樣式修改

html：

 <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;
    /* 注意不能設定為display:none*/
}

.radio-sex label {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    /*注意層級關係，如果不把label層級設為最低，會遮擋住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);
}
 

優點：充分藉助了CSS3的優勢，無需使用js和圖片，僅用純CSS3就可搞定

缺點：相容性較差，僅支援IE9+

html

 <div class="radio-item">
        <input type="radio" name="zhiye" id="" value=""/>
        <label>
            <i class="disc"></i>
            <i class="active"></i>
        </label>
        <span>視覺設計師</span>
    </div>
    <div class="radio-item">
        <input type="radio" name="zhiye" id="" value=""/>
        <label>
            <i class="disc"></i>
            <i class="active"></i>
        </label>
        <span>互動設計師</span>
    </div>
    <div class="radio-item">
        <input type="radio" name="zhiye" id="" value=""/>
        <label>
            <i class="disc"></i>
            <i class="active"></i>
        </label>
        <span>前端工程師</span>
    </div>

 

CSS樣式

.radio-item {
    position: relative;
    width: 132px;
    height: 44px;
    line-height: 44px;
    float: left;
    margin-right: 12px;
}

.radio-item input {
    width: 120px;
    height: 44px;
    opacity: 0;
    appearance: none;
    position: absolute;
    left: 0;
    top: 0;
}

.radio-item label {
    position: absolute;
    left: 0;
    top: 0;
    width: 120px;
    height: 36px;
    line-height: 36px;
    padding: 4px 6px;
    background-color: #EFEFEF;
    border-radius: 6px;
    z-index: -1;
    display: flex;
    align-items: center;
}

.radio-item label i {
    display: inline-block;
    margin-left: 6px;
}

.radio-item label i.disc {
    width: 8px;
    height: 8px;
    background: #333;
    border-radius: 100%;
}

.radio-item label i.active {
    width: 12px;
    height: 6px;
    border-left: 2px solid #FFFFFF;
    border-bottom: 2px solid #FFFFFF;
    transform: rotate(-45deg);
    display: none;
}

.radio-item span {
    margin-left: 32px;
}

.radio-item input:checked + label {
    background: #3698DB;
    color: #FFFFFF;
}

.radio-item input:checked + label i.disc {
    display: none;
}

.radio-item input:checked + label i.active {
    display: block;
}

.radio-item input:checked + label + span {
    color: #FFFFFF;
}

二、利用圖片實現樣式修改

實現思路 1.設定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的樣式，設定未選中狀態的背景圖

.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.使用相鄰選擇器設定選中狀態label的樣式

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

以上是radio單選框的實現程式碼，checkbox也是類似 將input type定義成checkbox即可

三、利用外掛實現

awesome-bootstrap-checkbox外掛

awesome-bootstrap-checkbox是一款可以美化Bootstrap複選框和單選按鈕的外掛。它使用純CSS編寫，沒有任何的javascript檔案。它通過在原生Bootstrap元件的基礎上做一些小改動，即可完成漂亮的美化效果。

演示地址：http://awesome-bootstrap-checkbox.okendoken.com/demo/index.html

外掛下載：https://www.bootcdn.cn/pretty-checkbox/

注：需要引入awesome-bootstrap-checkbox.css、font-awesome.css以及font awesome對應的字型font檔案

pretty.css外掛

pretty.css是一款純css3漂亮的checkbox和radio美化效果。pretty.css可以和多種字型圖示結合使用，對原生的checkbox和radio進行美化，還可以製作按鈕點選時的動畫效果。

演示地址：http://www.htmleaf.com/Demo/201708164688.html

外掛下載：http://www.htmleaf.com/css3/ui-design/201708164687.html

相關推薦