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里控制*/
}

 最后实现结果