input[type=checkbox]勾选框自定义样式

效果图：

<template>
<input class="rule-checkbox" type="checkbox" checked v-model="isChecked" />
</template>

<script setup lang="ts">
import { ref } from 'vue';
const isChecked = ref('');
</script>

<style scoped>
  .rule-checkbox {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }
 input.rule-checkbox[type='checkbox'] {
  -webkit-appearance: none;
  border: 2px solid #3bc117;
  outline: none;
  border-radius: 4px;
  background: transparent;
  position: relative;
}
input.rule-checkbox[type='checkbox']:checked {
  background-color: transparent;
}
input.rule-checkbox[type='checkbox']:checked::after {
  margin-top: 0.32px;
  margin-left: 1.44px;
  content: '\2713';
  color: #3bc117;
  display: block;
  font-size: 8px;
  font-weight: bold;
}
</style>