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

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

label {
  position: relative;
  padding-left: 25px; /* 为复选框留出空间 */
  cursor: pointer;
}

label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  border: 2px solid #000; /* 设置边框样式 */
  background-color: transparent; /* 设置背景透明 */
}

input[type="checkbox"]:checked + label::before {
  background-color: #000; /* 设置选中时的背景颜色 */
}