H5自定义checkbox样式

借助其它标签样式

思路：

设置checkbox类型的input表单为不可见
自定义div或label标签的常态及选中样式
根据checkbox的状态更新div或label标签的样式

index.vue

</template>
  ...
    <yd-cell-item type="checkbox" >
      <div slot="left" style="display: flex; align-items: center;">
        <input type="checkbox" v-model="user_agreement" />
        <div v-bind:class="[user_agreement ? 'yz-checkbox-checked' : 'yz-checkbox-normal']" style="width: 18px; height: 18px;"></div>
        <span style="margin-left: 10px; color: #A1A1A1; font-size: 14px;">我已阅读并同意服务协议及隐私条款</span>
      </div>
    <!--<yd-cell-item type="checkbox">-->
      <!--<span slot="left">我已阅读并同意服务协议及隐私条款</span>-->
      <!--<input slot="right" type="checkbox" value="User Agreement" v-model="user_agreement"/>-->
    </yd-cell-item>
  ...   
</template>

<style type="text/css">
  .yd-cell:after {
    border-bottom: 0;
  }
</style>

<script>
export default {
  name: 'login',
  data () {
    return {
      user_agreement: false
    }
  }
</script>

style.css

input[type=checkbox] {
  display: none;
}
.yz-checkbox-normal {
  background-image: url("/static/images/ic_checkbox_normal.png");
  background-size: 100% 100%;
  border: none;
}
.yz-checkbox-checked {
  background-image: url("/static/images/ic_checkbox_checked.png");
  background-size: 100% 100%;
  border: none;
}

直接定义CSS样式

input[type="checkbox"] {
  -webkit-appearance: none;  /*清除复选框默认样式*/
  background: #fff url("/static/images/ic_checkbox_normal.png") no-repeat;  /*复选框的背景图，就是上图*/
  background-size: 100% 100%;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  outline: none;  /*去掉自带的边框*/
  border: none;
}
input[type="checkbox"]:checked {
  -webkit-appearance: none;  /*清除复选框默认样式*/
  background: url("/static/images/ic_checkbox_checked.png") no-repeat;
  background-size: 100% 100%;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  outline: none;
  border: none;
}