如何在Bootstrap 5中制作具有多种自定义颜色的复选框开关

Question

如何制作具有自定义颜色的 Bootstrap 5 开关？ 我希望某些复选框开关的颜色与默认颜色不同。 我可以在网上找到的大多数答案都讨论如何仅在站点范围内更改它，或更改为图像。我正在寻找自定义颜色，理想情况下只在表单中添加几个新的 .class。

来自：https://getbootstrap.com/docs/5.2/forms/checks-radios/#switches

<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 中的相关类似乎对我不起作用。

Answer 1

添加额外的类或包装兔子我正在添加一个默认的类

<div class="form-check form-switch custom-switch-color">
 <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 中，只需在焦点和活动状态下覆盖默认颜色，您也可以根据您的要求和项目更改颜色。

.form-switch.custom-switch-color .form-check-input {
background-color: #a89291;
}
.form-switch.custom-switch-color  .form-check-input:checked {
background-color: #a6150f;
}