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

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

<template>
  <div class="checkbox-group">
    <label v-for="(option, index) in options" :key="index" class="checkbox-wrapper">
      <input type="checkbox" :value="option.value" v-model="selectedOptions" class="checkbox">
      <span class="label">{{ option.label }}</span>
    </label>
  </div>
</template>

<style>
.checkbox-group {
  display: flex;
  flex-direction: column;
}

.checkbox-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

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

.label {
  position: relative;
  padding-left: 30px;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
}

.label:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  border-radius: 2px;
}

.checkbox:checked + .label:before {
  background-color: #007aff;
  border-color: #007aff;
}

.checkbox:checked + .label:before:after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
</style>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        { value: 'option3', label: '选项3' },
      ],
      selectedOptions: [],
    }
  },
}
</script>

在这个示例中，我们使用了 `checkbox-group` 组件来管理多个 checkbox 的选中状态。我们使用 CSS 样式来自定义 checkbox 的外观，包括去掉边框、自定义背景颜色、自定义选中时的背景颜色等。在每个 checkbox 的 label 中，我们使用了 `before` 伪元素来绘制 checkbox 的外观。同时，我们使用了 Vue 的数据绑定功能来管理 checkbox 的选中状态。