如何制作具有自定义颜色的 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 中的相关类似乎对我不起作用。
添加额外的类或包装兔子我正在添加一个默认的类
<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;
}