在不使用字段集的情况下设置字段集中的多选框样式

<input type="checkbox" id="checkbox1">
<label for="checkbox1">选项1</label>

<input type="checkbox" id="checkbox2">
<label for="checkbox2">选项2</label>

<input type="checkbox" id="checkbox3">
<label for="checkbox3">选项3</label>

/* 隐藏原始的多选框 */
input[type="checkbox"] {
  display: none;
}

/* 自定义多选框样式 */
input[type="checkbox"] + label {
  position: relative;
  padding-left: 25px;
  cursor: pointer;
}

input[type="checkbox"] + label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  border: 1px solid #ccc;
  background-color: #fff;
}

input[type="checkbox"]:checked + label::before {
  background-color: #0078d7;
}

input[type="checkbox"] + label::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 6px;
  width: 6px;
  height: 6px;
  background-color: #fff;
  display: none;
}

input[type="checkbox"]:checked + label::after {
  display: block;
}