做項目的時候我們常常需要使用單選按鈕input[type=radio]和多選框input[type=checkbox],但是默認的樣式肯定與UI設計不一致,而且不夠美觀,這個時候就需要修改默認的樣式,方法其實有蠻多,最先想到的是圖片,但是有些時候,圖片作為背景圖片使用,在手機端適配效果不太理想,所以利用css3的重新實現了一遍,注意,因為使用到偽類屬性,故在ie8下無效。

原理

利用label標簽與對應的input關聯,設置label標簽的樣式,同時input設置透明度為0或者隱藏,使用position(定位)讓用戶看到的label標簽的樣式,點擊label時會選擇到對應的input,使用input的:checked偽類選擇器來改變選中label的樣式。
另外,這里小萌介紹兩種方法,一種是使用純CSS美化按鈕,另外一種是使用iconfont搭配css美化按鈕,dome鏈接附在文章底部,需要的小伙伴兒可自行下載。

方法一:使用純css修改單選框radio

<ul class="method-one">
    <li>
        <input type="radio" id="option_yes" name="isaloneshow">
        <label for="option_yes"></label>
        <span>是</span>
    </li>
    <li>
        <input type="radio" id="option_no" name="isaloneshow">
        <label for="option_no"></label>
        <span>否</span>
    </li>
</ul>

方法二:使用iconfont搭配css修改單選框radio

<ul class="method-two">
    <li>
        <input type="radio" id="option_one">
        <label class="iconfont icon-choice" for="option_one">?選項一</label>
    </li>
    <li>
        <input type="radio" id="option_two">
        <label class="iconfont icon-choice" for="option_two">?選項二</label>
    </li>
    <li>
        <input type="radio" id="option_three">
        <label class="iconfont icon-choice" for="option_three">?選項三</label>
    </li>
</ul>

另外,此方法需要搭配js來實現效果,也很簡單

$('.method-two label').on('click',function(){
    var radioId = $(this).attr('name');
    $('.method-two label').removeClass('icon-choice icon-selected') && $(this).addClass('icon-selected').parent().siblings().children('label').addClass('icon-choice');
    $('.method-two input[type="radio"]').removeAttr('checked') && $('#' + radioId).attr('checked', 'checked');
});

使用純css修改多選框checkbox

<ul class="method-three">
    <li>
        <input id="class_one" class="blue" type="checkbox">
        <label for="class_one"></label>
        <span>選項一</span>
    </li>
    <li>
        <input id="class_two" class="blue" type="checkbox">
        <label for="class_two"></label>
        <span>選項二</span>
    </li>
    <li>
        <input id="class_three" class="blue" type="checkbox">
        <label for="class_three"></label>
        <span>選項三</span>
    </li>
</ul>

這里主要展示html部分的代碼,具體的css樣式的代碼,需要的同學可點擊下方的DEMO鏈接進行查看。

點擊這里查看DEMO