我正在尝试更改此处给出的单选按钮的颜色https://getbootstrap.com/docs/5.0/components/button-group/#checkbox-和单选按钮组
通常背景是白色的，当点击它们时，它们会变成蓝色。
<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>
我想在未单击时将默认背景颜色更改为绿色，在选中/选中时将其更改为红色。
在这里，我在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;
}
这是您必须覆盖的类。请注意，引导程序的选择比您的更具体，所以它会提前。
.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>标记中的引导程序下，它将起作用。否则需要添加!important。