I am trying to change the colors of radio buttons given here https://getbootstrap.com/docs/5.0/components/button-group/#checkbox-and-radio-button-groups
normally the background is white, and when they are clicked they turn to blue.
<div role="group" aria-label="Basic radio toggle button group">
<input type="radio" name="btnradio" id="btnradio1" autocomplete="off" checked>
<label for="btnradio1">Radio 1</label>
<input type="radio" name="btnradio" id="btnradio2" autocomplete="off">
<label for="btnradio2">Radio 2</label>
</div>
I would like to change the default background color to green when not clicked, and to red when it is checked/selected.
Here what I tried in css, it changes to green, but the selected button does not turn to red.
.btn-outline-primary {
background-color: green !important;
}
.btn-outline-primary:active,
.btn-outline-primary:checked,
.btn-outline-primary:hover,
.btn-outline-primary:enabled {
background-color: red !important;
}
CodePudding user response:
This is the class you have to overwrite. Notice that bootstrap selection is more specific than yours, so it comes ahead.
.btn-check:active .btn-outline-primary,
.btn-check:checked .btn-outline-primary,
.btn-outline-primary.active,
.btn-outline-primary.dropdown-toggle.show,
.btn-outline-primary:active {
color: #fff;
background-color: red;
border-color: red;
}
Also, if your CSS file goes under the bootstrap's in your <head>
tag, it will works. Otherwise need to add !important
.