带有后元素的自定义复选框-不可靠地居中

<label class="custom-checkbox">
  <input type="checkbox">
  <span class="checkmark"></span>
</label>

.custom-checkbox {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}

.custom-checkbox input[type="checkbox"] {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}

.checkmark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  background-color: #ccc;
}

.custom-checkbox input[type="checkbox"]:checked + .checkmark {
  background-color: #007bff;
}

const checkbox = document.querySelector('.custom-checkbox input[type="checkbox"]');
checkbox.addEventListener('change', function() {
  if (this.checked) {
    // 复选框被选中的处理逻辑
  } else {
    // 复选框未被选中的处理逻辑
  }
});