我正在嘗試更改此處給出的單選按鈕的顏色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>
我想在未單擊時將默認背景顏色更改為綠色，并在選中/選擇時更改為紅色。
這是我在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;
}
uj5u.com熱心網友回復：
這是您必須覆寫的類。請注意，引導程式選擇比您的選擇更具體，因此它領先。
.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。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/437643.html