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

html 布局：

<div class="app">
      <input type="checkbox" name="">
</div>

css 样式：

.app  input{
    width: 2rem;
    height: 2rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background:url(../img/unchecked.png)no-repeat top center;
    background-size:2rem 2rem;
}
.app input:checked{
    background:url(../img/checked.png)no-repeat top center;
    background-size:2rem 2rem;
}

如此，当点击 input 时，便会自动切换选中和未选中 unchecked.png 和 checked.png 两张图片。

若想页面直接显示为选中状态，则可在 input 标签上添加 checked=“checked” 即可。