Bootstrap 在检查时覆盖单选按钮颜色

Question

我正在尝试更改此处给出的单选按钮的颜色 https://getbootstrap.com/docs/5.0/components/button-group/#checkbox-and-radio-button-groups

通常背景是白色的，点击后会变成蓝色。

<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>

我想在未单击时将默认背景颜色更改为绿色，在单击时更改为红色 checked/selected。

这是我在css中尝试过的，它变成了绿色，但是选中的按钮并没有变成红色。

    .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;
    }

Answer 1

这是您必须覆盖的 class。请注意，bootstrap 选择比您的选择更具体，因此它排在前面。

.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;
}

此外，如果您的 CSS 文件位于 <head> 标签中的 bootstrap 下，它也可以使用。否则需要加上!important.

Bootstrap 在检查时覆盖单选按钮颜色

Boostrap override radio button color on check

html

css

twitter-bootstrap

bootstrap-5