Boostrap override radio button color on check

March 2, 2022

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 class="btn-group" role="group" aria-label="Basic radio toggle button group">
    <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
    <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
  
    <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
    <label class="btn btn-outline-primary" 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;
    }

>Solution :

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.