css - ng-bootstrap 更改单选按钮的默认颜色

Question

我是 ng-bootstrap 的新手。 ng-bootsrap 中单选按钮的默认颜色是蓝色。我需要默认颜色为黄色，点击它应该是绿色。

buttons-radio.html

    <div class="btn-group btn-group-toggle" 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>
<hr>
<pre>{{model}}</pre>

buttons-radio.ts

import {Component} from '@angular/core';

@Component({
  selector: 'ngbd-buttons-radio',
  templateUrl: './buttons-radio.html'
})
export class NgbdButtonsRadio {
  model = 1;
}

Please see sample code here

Answer 1

你需要下面的css

.custom-btns .btn-primary:not(:disabled):not(.disabled).active,
.custom-btns .btn-primary:not(:disabled):not(.disabled):active,.custom-btns .show>.btn-primary.dropdown-toggle {
    color: #000;
    background-color: yellow;
    border-color: yellow;
}
.custom-btns .btn-primary {
    color: #fff;
    background-color: #4CAF50;
    border-color: #4CAF50;
}
.custom-btns .btn-primary:hover {
    color: #fff;
    background-color: #3e9941;
    border-color: #3e9941;
}
.custom-btns .btn-primary.focus, .btn-primary:focus {
    box-shadow: 0 0 0 0.2rem #FFEB3B;
}

参见 demo