设置自定义复选框标签外观的样式

<input type="checkbox" id="myCheckbox">
<label for="myCheckbox">复选框标签</label>

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

/* 自定义复选框样式 */
label {
  display: inline-block;
  position: relative;
  padding-left: 25px;
  margin-right: 10px;
  cursor: pointer;
}

/* 复选框外观 */
label:before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  background-color: #fff;
  position: absolute;
  left: 0;
  top: 0;
}

/* 复选框选中状态外观 */
input[type="checkbox"]:checked + label:before {
  background-color: #0078d7;
}

/* 复选框文本样式 */
label:after {
  content: "✔";
  font-size: 14px;
  color: #fff;
  position: absolute;
  top: 2px;
  left: 5px;
  visibility: hidden;
}

/* 复选框选中状态下文本样式 */
input[type="checkbox"]:checked + label:after {
  visibility: visible;
}