Is it possible to customize the color of a Bootstrap 5 switch without changing it site-wide? I want some checkbox switches to have a unique color. Most tutorials online only cover how to change colors globally or use images, but I'm hoping to achieve custom colors with just a few additional classes added to the forms.
You can find more information on switches here.
<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>
I attempted to override the relevant classes in my local CSS file, but it didn't work as expected.
In trying to solve this issue, I created a new CSS class and added it to the existing list:
.custom-checkbox-red {
background-color: red;
}
After reading 'Md's response, I realized my mistake was not chaining the classes correctly. The correct way is:
.form-switch.custom-switch-red