自定义checkbox样式

可以通过 CSS 来自定义 checkbox 的样式。以下是一个简单的例子：

HTML 代码：

<label>
  <input type="checkbox" class="my-checkbox">
  <span class="checkmark"></span>
  Checkbox Label
</label>

CSS 代码：

/* 隐藏原始的 checkbox */
.my-checkbox {
  display: none;
}

/* 定义 checkbox 的样式 */
.checkmark {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #eee;
  border: 1px solid #ccc;
}

/* 当 checkbox 被选中时，改变背景颜色 */
.my-checkbox:checked + .checkmark {
  background-color: #007bff;
}

/* 定义 checkbox 所在标签的样式 */
label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-size: 16px;
}

/* 增加一些空隙，使样式更美观 */
label:not(:last-child) {
  margin-right: 10px;
}

在这个例子中，我们使用了一个隐藏的原始 checkbox，并创建了一个自定义的样式。当 checkbox 被选中时，我们使用 CSS 选择器 `:checked` 来改变它的样式。我们还对 checkbox 所在的标签进行了样式定义，以使它们更加美观。你可以根据自己的需要调整这些样式。