本质上还是用图片来覆盖原来的样式
/*首先隐藏原来的样式*/
input[type="checkbox"]{display: inline-block;position: relative;visibility: hidden;}
/*未选中时显示未选中的图片*/
input[type="checkbox"]:after{content: '';position: absolute;top: 0;left: 0;width: 15px;height: 15px;background: url("https://img-blog.csdnimg.cn/1e59f3a7a45e45cbb640757dd17c8dce.png") no-repeat;background-size: 100% 100%;visibility: visible;}
/*选中时显示选中的图片*/
input[type="checkbox"]:checked:before{content: '';position: absolute;top: 0;left: 0;width: 15px;height: 15px;background: url("https://img-blog.csdnimg.cn/0efc93ebf6df4664a90c5c46fc359469.png") no-repeat;background-size: 100% 100%;visibility: visible;}
/*并且选中时隐藏未选中的图片*/
input[type="checkbox"]:checked:after{visibility: hidden;}
/*这里使用的图片链接是传到csdn上的,建议使用自己的*/
这是最终展示的样子
//图片源文件(@v@)f12自取