input[type='checkbox'] 自定义样式（使用自己的按钮图片）

关于 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" 即可。