如何通过style.css自定义Bootstrap单选切换按钮选中状态颜色？

我希望通过自定义style.css来修改Bootstrap单选切换按钮的颜色，目前已成功修改正常模式下的背景色，但无法修改选中状态的颜色。在网上未找到更多相关信息，请问是否必须使用SCSS？我编写的选中状态样式是否正确？

CSS代码 #

.showborder{
    border-color: black;
    border-width: 1px;
    border-style: solid;
}
body{
    background-color: rgb(193, 221, 246);
}
.container{
    border-radius: 5px;
    padding: 20px;
    margin-top: 30vh;
    background-color: #fff;
}
.btn-secondary{
    padding-top: 15px;
    padding-bottom: 15px;
    margin: 5px; 
    background-color: aliceblue;
}
.btn-secondary:checked{
    background-color: crimson !important;
}
.hright{
    text-align: right;
}

HTML代码 #

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>
        Antreibertest  
    </title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" 
        rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" 
        crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="app container">
            <h1>
                Willkommen zum Antreibertest!
            </h1>
            <div class="test">
                <p id="question">Question goes here</p>
                <div id="answer-buttons" class="row">
                    <input class="col btn-check" type="radio" id="r1" name="answer" value="1" autocomplete="off">  
                    <label class="col btn btn-secondary" for="r1">1</label>

                    <input class="col btn-check" type="radio" id="r2" name="answer" value="2" autocomplete="off">  
                    <label class="col btn btn-secondary" for="r2">2</label>

                    <input class="col btn-check" type="radio" id="r3" name="answer" value="3" autocomplete="off" checked >  
                    <label class="col btn btn-secondary" for="r3">3</label>

                    <input class="col btn-check" type="radio" id="r4" name="answer" value="4" autocomplete="off">  
                    <label class="col btn btn-secondary" for="r4">4</label>

                    <input class="col btn-check" type="radio" id="r5" name="answer" value="5" autocomplete="off">  
                    <label class="col btn btn-secondary" for="r5">5</label>
                </div>
                <div class="row">
                    <div class="hleft col">Trifft nicht zu</div>
                    <div class="hright col">Trifft voll zu</div>
                </div>
            </div>
            <button id="next-btn">Weiter</button>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.min.js" 
            integrity="sha384-Y4oOpwW3duJdCWv5ly8SCFYWqFDsfob/3GkgExXKV4idmbt98QcxXYs9UoXAB7BZ" 
            crossorigin="anonymous"></script>
        <script type="text/javascript" src="script.js"></script>
    </body>
</html>

1. 无需使用SCSS，纯CSS即可实现
   Bootstrap组件样式可通过自定义CSS直接覆盖，不需要依赖SCSS预处理器，只要选择器逻辑正确或优先级足够即可生效。

2. 选中状态样式选择器错误
   你写的.btn-secondary:checked逻辑错误：.btn-secondary是<label>元素，本身不存在checked状态，真正处于选中状态的是与之关联的<input class="btn-check">单选框。

3. 修正后的选中状态样式
   使用CSS相邻兄弟选择器，关联选中的单选框和对应的标签：

   .btn-check:checked + .btn-secondary {
       background-color: crimson !important;
   }
   

   该选择器表示：当.btn-check类的单选框处于checked状态时，修改其紧邻的.btn-secondary标签的背景色。

4. 完整修正后的CSS代码

   .showborder{
       border-color: black;
       border-width: 1px;
       border-style: solid;
   }
   body{
       background-color: rgb(193, 221, 246);
   }
   .container{
       border-radius: 5px;
       padding: 20px;
       margin-top: 30vh;
       background-color: #fff;
   }
   .btn-secondary{
       padding-top: 15px;
       padding-bottom: 15px;
       margin: 5px; 
       background-color: aliceblue;
   }
   /* 修正后的选中状态样式 */
   .btn-check:checked + .btn-secondary {
       background-color: crimson !important;
   }
   .hright{
       text-align: right;
   }
   

内容的提问来源于stack exchange，提问作者D.Schall