前言
遇到的一个小需求，需要封装checkbox组件，需要支持自定义样式和自定义icon。
首先谈谈为什么不用div、span元素，因为这些元素少了一些input默认的状态，比如checked，如果要给元素加这些状态，就会增加一定的心智负担，需要逻辑来维护状态，所以需要在如下的元素中去修改默认样式，但是很多地方并没有成熟方案去解决问题
<input type="checkbox" class="checkbox-input" value="true">
效果
方案
-
用非input元素实现input checkbox 这种方法，就是我前面提到的，维护一个checkbox的状态说简单也简单，说复杂也复杂，终究来说是有一些逻辑要书写的，所以不推荐。
-
伪元素 + content定义 这种方法，使用content来替代勾选的内容，比如使用
content: "✓"，但是这个缺点也很明显，不能自定义icon。 -
伪元素 + background + base64 icon 首先用
appearance: none置空input默认样式，再使用伪元素覆盖input默认样式，然后icon需要用svg转data:image/png，再使用background去将base64引入到背景里，即可，再加以修改默认样式和checked样式，即可达到目的。
代码实现
input[type=checkbox] {
position: relative;
width: 24px;
height: 24px;
background: #fff;
cursor: pointer;
appearance: none;
}
input[type=checkbox]::after {
position: absolute;
top: 0;
left: 0;
color: #000;
width: 24px;
height: 24px;
border: 1px solid #666;
border-radius: 4px;
content: '';
}
input[type=checkbox]:checked::after {
content: '';
color: #fff;
border: 1px solid #4A5FA4;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAUCAMAAACgaw2xAAAAnFBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+TINBkAAAAM3RSTlMAAQMGCg8QFRocJCgtNztBQkpOW19pa3h6h4qRlpukprG9wcjP0tTa3ePm6vDz9fb5/P6pql7jAAAAp0lEQVQY023RSVYCARAE0WwQFWdRVBxAVJxtwX//u7lowddDLqNqkVGVdOTq62m/i1/ioYOf/WDZ5idLeG7xg09YnTb58A2Mm3ywAJMkOTrf3vD+HEyLJBe87PzxYgrm/SR5x+NWNZiAxSBJ8g33vSQZg9dhtTUDd0UyWsHHXrPHcQnlYbP5dSU2arnqEKuusxFr3nMt1vrAWqye23+xeno35Xy3Rn4BZZYfJJlamuUAAAAASUVORK5CYII=') #4A5FA4 no-repeat center;
background-size: 12px 10px;
}
结束语
觉得不错的话，还请点个赞哦！
