Bootstrap 5 多开关自定义不同颜色失效问题求助

你遇到的问题根源是全局修改.form-check-input样式会覆盖所有开关，要实现每个开关对应专属颜色，需给每个开关添加唯一自定义类，再通过CSS针对性调整样式。

步骤1：调整HTML结构 #

给每个开关的<input>元素添加专属自定义类（比如switch-red、switch-blue这类语义化命名，或switch-color-1到switch-color-10），同时保证每个开关的id与对应label的for属性一一匹配：

<!-- 红色开关 -->
<div class="form-check form-switch mb-3">
  <input class="form-check-input switch-red" type="checkbox" role="switch" id="switchRed">
  <label class="form-check-label" for="switchRed">红色项目</label>
</div>

<!-- 蓝色开关 -->
<div class="form-check form-switch mb-3">
  <input class="form-check-input switch-blue" type="checkbox" role="switch" id="switchBlue">
  <label class="form-check-label" for="switchBlue">蓝色项目</label>
</div>

<!-- 其余8个开关按此逻辑扩展，替换类名、id和标签文本即可 -->

步骤2：编写自定义CSS #

针对每个自定义类，分别修改开关在未选中、选中、聚焦状态下的样式：

/* 红色开关样式 */
.switch-red {
  /* 未选中时的边框颜色 */
  border-color: #dc3545;
}
.switch-red:checked {
  /* 选中时的背景色与边框色 */
  background-color: #dc3545;
  border-color: #dc3545;
}
.switch-red:focus {
  /* 聚焦时的阴影，保持颜色一致的半透明效果 */
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

/* 蓝色开关样式 */
.switch-blue {
  border-color: #0d6efd;
}
.switch-blue:checked {
  background-color: #0d6efd;
  border-color: #0d6efd;
}
.switch-blue:focus {
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* 其他颜色开关复制上述结构，替换对应色值即可 */
/* 示例：绿色开关 */
.switch-green {
  border-color: #198754;
}
.switch-green:checked {
  background-color: #198754;
  border-color: #198754;
}
.switch-green:focus {
  box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}

关键注意点 #

• 每个开关的自定义类必须唯一，避免样式冲突
• 色值可替换为你需要的专属颜色（十六进制、RGB、HSL格式均支持）
• 聚焦状态的box-shadow使用对应颜色的半透明值，保持Bootstrap交互风格一致性

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