ss實現checkbox及radio樣式自定義

input實現的單選或複選，默認樣式是很醜的，UI設計通常會設計出各種花樣，來滿足視覺要求，在這裏就說下怎麼藉助css來修改單選/複選框樣式，首先我們來看下效果

圖片來自他人博客（https://www.cnblogs.com/fozero/p/8902116.html）

 

1. 設置input 屬性hidden對該input進行隱藏，或者通過display:none也可以

<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('http://bobostatic.oss-cn-hangzhou.aliyuncs.com/boboweex/lesson/web/icon/[email protected]');
     background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    margin-top: -4px;
}

4.使用相鄰選擇器設置選中狀態label的樣式

input[type="radio"]:checked + .advice{
    background-image: url('http://bobostatic.oss-cn-hangzhou.aliyuncs.com/boboweex/lesson/web/icon/[email protected]');
}

5. 完整代碼

<label>
    <input type="radio" name="type" id="adviceRadio1" value="1" checked hidden/>
    <label for="adviceRadio1" class="advice"></label>
    <span class="radio-name">問題</span>
</label>
<label>
    <input type="radio" name="type" id="adviceRadio2" value="2" hidden/>
    <label for="adviceRadio2" class="advice"></label>
    <span class="radio-name">建議</span>
</label>
<style type="text/css">
.advice{
    height: 12px;
    width: 12px;
    display: inline-block;
    background-image: url('http://bobostatic.oss-cn-hangzhou.aliyuncs.com/boboweex/lesson/web/icon/[email protected]');
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    margin-top: -4px;
}
input[type="radio"]:checked + .advice{
    background-image: url('http://bobostatic.oss-cn-hangzhou.aliyuncs.com/boboweex/lesson/web/icon/[email protected]');
}
</style>

獲取radio及checkbox選中的值

1.獲取radio的值
使用jquery獲取radio的值有3種方式：

$('input:radio:checked').val()；
$("input[type='radio']:checked").val();
$("input[name='rd']:checked").val();

2.獲取checkbox的值

var obj = document.getElementsByName("hobby");
var check_val = [];
for(k in obj){
    if(obj[k].checked){
        check_val.push(obj[k].value);
    }
}

遇到的坑

一開始寫的時候，我是使用僞元素的方式實現，先將input進行隱藏 ，然後設置input:after定義它的樣式,代碼如下：

//html
<input type="radio" name="sex" id="male" /><label for="male"> Male</label>

//css
input[type=radio]{
    visibility: hidden;
}
input[type=radio]:checked::after{
    background-image: url('./img/sprite.png');
    background-repeat: no-repeat;
    background-position: -59px -10px;
    visibility: visible;
}
input[type=radio]::after{
    content: ' ';
    display: block;
    height: 20px;
    width: 20px;
    background-image: url('./img/sprite.png');
    background-repeat: no-repeat;
    background-position: -24px -10px;
    visibility: visible;
}

但是後來發現這種方式兼容性有問題，在firefox瀏覽器無法顯示，經查資料是因爲input不支持僞元素:after,:before 。
火狐瀏覽器無法插入內容DOM元素，僞元素都是在容器內進行渲染的。input無法容納其他元素，因此它不支持僞元素。
input，img，iframe等元素都不能包含其他元素，所以不能通過僞元素插入內容。至於Chrome 中checkbox和radio可以插入應該就是bug了
input要配合其它容器元素（i,span）等實現預期效果

完整的代碼已上傳到了https://github.com/fozero/frontcode，可以點擊查看，如果覺得還不錯的話，記得star一下哦！