方式一 配合label 标签

你可以使用CSS来自定义复选框（checkbox）的样式，使其外观更符合你的设计需求。下面是一种常见的方法，通过CSS来自定义复选框的样式：

HTML结构：

<input type="checkbox" id="myCheckbox" class="custom-checkbox">
<label for="myCheckbox" class="custom-checkbox-label"></label>

CSS样式：

/* 隐藏原生复选框 */
.custom-checkbox {
  position: absolute;
  opacity: 0;
}

/* 创建自定义复选框的外观 */
.custom-checkbox-label {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #333;
  background-color: #fff;
  cursor: pointer;
}

/* 当复选框选中时，改变背景颜色 */
.custom-checkbox:checked + .custom-checkbox-label {
  background-color: #007bff;
}

/* 创建复选框内的勾号图标 */
.custom-checkbox:checked + .custom-checkbox-label::before {
  content: '\2713';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 18px;
}

这段CSS代码首先隐藏了原生的复选框，然后创建了一个自定义复选框的外观。当用户点击标签元素时，原生复选框将被切换。通过使用伪类 :checked，你可以根据复选框的状态来改变样式。

这只是一个简单的示例，你可以根据自己的设计需求来自定义复选框的样式。通过修改上述CSS代码，你可以更改复选框的大小、颜色、形状和图标等。这种方法可以用于创建符合你网站或应用程序设计风格的自定义复选框。

方式二 纯靠css改样式

  input[type='checkbox'] {
    cursor: pointer;
    font-size: 14px;
    width: 16px;
    height: 16px;
    position: relative;
  }

  input[type='checkbox']:after {
    position: absolute;
    width: 16px;
    height: 16px;
    top: 0;
    content: ' ';
    color: $white-color;
    display: inline-block;
    visibility: visible;
    padding: 0px 3px;
    border-radius: 3px;
    background: $white-color;
    border: $border;
    box-sizing: border-box;
  }

  input[type='checkbox']:checked:after {
    content: '\2713';
    font-size: 12px;
    font-weight: 600;
    background-color: #0d5c91;
    border: none;
  }

其它参考

我自己用vue3写了一个checkbox组件，感兴趣的同学可以看看
vue3 组件篇 checkbox https://dengxi.blog.csdn.net/article/details/127137826
dxui组件库官网 dxui.cn