css修改多選框的樣式

每日的艱辛歷程：最開始做好的是左邊這個樣子，設計師說害太醜了，做成右邊這種吧，然後就 改唄。

最開始是想修改僞元素的樣式來實現，然後發現僞元素的樣式不能通過js來修改（因爲系統名對應的顏色值是後臺返回的），所以只能換種方法。

      

實現的思路是用新加的label標籤替換掉默認的input多選框

<input type="checkbox" class="checkone" value="專項行動管理系統" iconcolor="#ce53c1" name="sysnameselect">
<label class="label-box"></label>

 父容器相對定位，label標籤定位的與input多選框位置相同，但是注意原生的input不要使用display:none屬性，會點擊不到，採用opacity:0的屬性。然後z-index設置比input高點。

#sysnameList li .checkone{
    opacity: 0;
    z-index:9;
}
#sysnameList li .label-box {
    width:20px;
    height:20px;
    padding: 9px;
    border-radius: 20px;
    display: inline-block;
    position: absolute;
    left: 15px;
    background: #cecece;/*多選框未選中的背景色，選中背景色在js裏控制*/
}

 最後實現結果