每日的艰辛历程：最开始做好的是左边这个样子，设计师说害太丑了，做成右边这种吧，然后就 改呗。
最开始是想修改伪元素的样式来实现，然后发现伪元素的样式不能通过js来修改（因为系统名对应的颜色值是后台返回的），所以只能换种方法。
实现的思路是用新加的label标签替换掉默认的input多选框
父容器相对定位，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里控制*/ }最后实现结果
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/215871.html原文链接：https://javaforall.net
