Bootstrap btn-group 改变颜色

Question

How can I change the background color of the active/selected button in the button group?

<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
  <input type="radio" class="btn-check" name="btnradio" id="btnradio1" checked>
  <label id="monthly" class="btn btn-outline-primary" for="btnradio1">Button 1</label>
        
  <input type="radio" class="btn-check" name="btnradio" id="btnradio2">
  <label class="btn btn-outline-primary" for="btnradio2">Button 2</label>
</div>

By using this css, the unselected btn color gets changed. But how can I change the background color of the selected btn?

.btn-group .btn {
 color: #ff60bd;
 border-color: #ff60bd;
}

Many thanks!

Answer 1

Add this code in your css file and try. First is to hide the radio controls, but second is I think what you need if you want to change the background color when button is :checked

input[type="radio"]{
    display: none;
}

input[type="radio"]:checked + .btn {
    color: #fff;
    background: #ff60bd!important;
}

input[type="radio"]:hover + .btn {
  color: #fff;
  background-color: red;
}

Answer 2

The selected or active button has active class, you need to check ".active" class of ".btn" as following sample:

.btn-group .btn.active {
 color: #ff60bd;
 border-color: #ff60bd;
}