关于 input 按钮自定义样式，碰到过无数次了，有直接使用div标签和img实现的，也有使用 input 然后再替换成自己的图片。
以下，将input替换成自己图片的方法做一个总结，写成一个小栗子，方便参考使用。
html 布局：
<div class="shopL">
<label><input type="checkbox" name=""></label>
</div>
css 样式：（appearance ：外貌、外观）
.shopL label input{
width: 39/75rem;
height: 39/75rem;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background:url(../img/shop_hei.png)no-repeat top center;
background-size:39/75rem 39/75rem;
}
.shopL label input:checked{
background:url(../img/shop_hong.png)no-repeat top center;
background-size:39/75rem 39/75rem;
}
如此，当点击 input 时，便会自动切换选中和未选中 shop_hei.png 和 shop_hong.png 两图片。
若想页面直接显示为红色选中状态，则可在 input 标签上添加 checked="checked" 即可。
作者：乡村葫芦娃呀
来源：CSDN
原文：https://blog.csdn.net/weixin_42220533/article/details/82348855
版权声明：本文为博主原创文章，转载请附上博文链接！
