vue小程序checkbox标签去边框，自定义样式

如果您想在 Vue 小程序中去掉 checkbox 的边框并自定义样式，可以使用以下的代码示例：

<template>
  <div class="checkbox-wrapper">
    <input type="checkbox" id="myCheckbox" v-model="isChecked" class="checkbox">
    <label for="myCheckbox" class="label"></label>
  </div>
</template>

<style>
.checkbox-wrapper {
  position: relative;
  width: 20px;
  height: 20px;
}

.checkbox {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.label {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border: 1px solid #ccc; /* 自定义边框样式 */
  background-color: #fff; /* 自定义背景颜色 */
}

.label:after {
  content: "";
  position: absolute;
  display: none;
}

.checkbox:checked + .label {
  background-color: #007aff; /* 自定义选中时的背景颜色 */
}

.checkbox:checked + .label:after {
  display: block;
}

.checkbox:checked + .label:after {
  left: 7px;
  top: 3px;
  width: 6px;
  height: 12px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
</style>

<script>
export default {
  data() {
    return {
      isChecked: false,
    }
  },
}
</script>

在这个示例中，我们使用 CSS 样式来自定义 checkbox 的外观，包括去掉边框、自定义背景颜色、自定义选中时的背景颜色等。同时，我们使用了 Vue 的数据绑定功能来管理 checkbox 的选中状态。