如何在Bootstrap 5中实现带多自定义颜色的复选框开关（Switch）

我完全懂你的需求——就是想给特定的Bootstrap开关设置自定义颜色，不是全局改所有开关，而是通过新增几个类来灵活控制对吧？之前你直接写单个自定义类没生效，其实是踩了CSS优先级的坑，下面给你说清楚怎么弄：

首先，Bootstrap 5的开关基础结构还是用官方的代码，我们只需要给input标签加自定义类就行：

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>

接下来是关键的CSS部分，因为Bootstrap默认的开关样式优先级不低，所以我们需要把自定义类和Bootstrap的原有选择器链式组合，才能覆盖默认样式。比如我们要做红色、绿色两种自定义开关：

/* 红色开关样式 */
.form-switch .form-check-input.custom-switch-red:checked {
  background-color: #dc3545; /* 这里用Bootstrap自带的危险色，也可以直接写red */
  border-color: #dc3545;
}
/* 可选：未选中时的边框也改成红色 */
.form-switch .form-check-input.custom-switch-red {
  border-color: #dc3545;
}

/* 绿色开关样式 */
.form-switch .form-check-input.custom-switch-green:checked {
  background-color: #198754; /* Bootstrap成功色 */
  border-color: #198754;
}
.form-switch .form-check-input.custom-switch-green {
  border-color: #198754;
}

然后在HTML里直接给对应的input加上自定义类就可以用了：

<!-- 红色开关示例 -->
<div class="form-check form-switch">
  <input class="form-check-input custom-switch-red" type="checkbox" role="switch" id="flexSwitchCheckRed">
  <label class="form-check-label" for="flexSwitchCheckRed">Red switch checkbox input</label>
</div>

<!-- 绿色开关示例 -->
<div class="form-check form-switch">
  <input class="form-check-input custom-switch-green" type="checkbox" role="switch" id="flexSwitchCheckGreen">
  <label class="form-check-label" for="flexSwitchCheckGreen">Green switch checkbox input</label>
</div>

你之前为什么没成功呢？因为你只单独写了.custom-checkbox-red { background-color: red; }，这个选择器的优先级比Bootstrap默认的.form-switch .form-check-input:checked低，所以样式被覆盖了。通过链式组合选择器，就能让自定义样式的优先级更高，从而生效啦。

备注：内容来源于stack exchange，提问作者warath-coder