如何为ng-bootstrap单选按钮的label标签设置hover与focus样式？

问题场景 #

使用ng-bootstrap构建单选按钮组后，尝试自定义hover、focus和active样式但未生效，仅能看到浏览器默认的选中轮廓。

原始HTML代码 #

<div class="btn-group btn-group-toggle custom-btns" ngbRadioGroup name="radioBasic" [(ngModel)]="model">
  <label ngbButtonLabel class="btn-primary">
    <input ngbButton type="radio" [value]="1"> Left (pre-checked)
  </label>
  <label ngbButtonLabel class="btn-primary">
    <input ngbButton type="radio" [value]="middle"> Middle
  </label>
  <label ngbButtonLabel class="btn-primary">
    <input ngbButton type="radio" [value]="false"> Right
  </label>
</div>

原始CSS代码 #

.custom-btns{
    .btn-primary:hover{
        background-color: green;
        color: black;
    }
    .btn-primary:focus, btn-primary:active{
        color: #fff ;
        background: blue;
        border: none;
        outline: none;
    }
}

错误原因分析 #

1. CSS语法错误：btn-primary:active选择器前缺少.，导致该样式规则完全无效。
2. 选择器优先级不足：ng-bootstrap自带的.btn-primary.active样式优先级高于自定义样式，导致选中状态的自定义样式被覆盖。
3. 聚焦状态目标错误：实际获得焦点的是内部的<input>元素，而非外层的<label>，直接给.btn-primary:focus设置样式无法触发预期效果。

修正后的CSS代码 #

.custom-btns {
  // 鼠标悬停label时的样式
  .btn-primary:hover {
    background-color: green;
    color: black;
    // 若仍被默认样式覆盖，可添加!important提升优先级
    // background-color: green !important;
    // color: black !important;
  }

  // 内部input聚焦时，触发label的样式
  .btn-primary:focus-within {
    color: #fff;
    background-color: blue;
    border: none;
    outline: none;
    // 若仍被默认样式覆盖，可添加!important提升优先级
    // color: #fff !important;
    // background-color: blue !important;
  }

  // 单选按钮选中时的样式（覆盖ng-bootstrap默认active样式）
  .btn-primary.active {
    color: #fff;
    background-color: blue;
    border: none;
    outline: none;
    // 若仍被默认样式覆盖，可添加!important提升优先级
    // color: #fff !important;
    // background-color: blue !important;
  }
}

关键说明 #

• 使用:focus-within伪类：当<label>内部的<input>获得焦点时，自动为<label>应用样式，解决聚焦状态不生效的问题。
• 针对active类：ng-bootstrap会为选中的单选按钮对应的<label>添加active类，通过.btn-primary.active选择器可精准覆盖默认样式。
• 优先级处理：如果自定义样式仍被默认样式覆盖，可在属性值后添加!important，或使用更具体的选择器（如.custom-btns .btn-primary.ngb-button-label.active）提升优先级。

内容的提问来源于stack exchange，提问作者474gaurav