基于Bootstrap 5.3实现自定义彩色复选框的问题求助

1. 修正HTML结构（合并关联label） #

把自定义颜色球和文字放在同一个form-check-label内，确保点击颜色球或文字都能触发复选框状态切换，同时遵循Bootstrap的结构规范：

<div class="form-check d-flex align-items-center gap-2">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckRed">
  <label class="form-check-label font-philos-ita" for="flexCheckRed">
    <span class="checkbox-container position-relative">
      <span class="checkbox-ring-size rounded-circle border border-1 border-danger"></span>
      <span class="checkbox-color-size rounded-circle bg-danger"></span>
    </span>
    RED
  </label>
</div>

2. 正确隐藏原生复选框 #

替换原隐藏方式，确保原生复选框不可见但仍能响应交互（避免空白区域误触发）：

.form-check-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  cursor: pointer;
}

3. 调整自定义复选框布局样式 #

通过容器定位让边框和颜色球重叠，适配Bootstrap的布局逻辑：

.checkbox-container {
  display: inline-block;
  width: 14px;
  height: 14px;
  position: relative;
}

.checkbox-ring-size {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.checkbox-color-size {
  width: 10px;
  height: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0; /* 默认隐藏颜色球，选中时显示 */
  transition: opacity 0.2s ease;
}

4. 添加选中状态交互样式 #

利用Bootstrap原生的checked伪类，控制自定义元素的显示状态：

.form-check-input:checked + .form-check-label .checkbox-color-size {
  opacity: 1; /* 选中时显示颜色球 */
}

/* 可选：选中时添加边框高亮效果 */
.form-check-input:checked + .form-check-label .checkbox-ring-size {
  border-color: var(--bs-danger);
  box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.25);
}

5. 多颜色复用示例 #

如果需要蓝色等其他颜色，只需替换对应的Bootstrap颜色类即可：

<div class="form-check d-flex align-items-center gap-2">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckBlue">
  <label class="form-check-label font-philos-ita" for="flexCheckBlue">
    <span class="checkbox-container position-relative">
      <span class="checkbox-ring-size rounded-circle border border-1 border-primary"></span>
      <span class="checkbox-color-size rounded-circle bg-primary"></span>
    </span>
    BLUE
  </label>
</div>

.form-check-input:checked + .form-check-label .checkbox-ring-size.border-primary {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
}

内容的提问来源于stack exchange，提问作者jackblue1999