ng-bootstrap Change default color of radio button

Question

I am new to ng-bootstrap. Default color of radio buttons in ng-bootsrap is blue. I need default color as yellow and on click it should be green.

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

you need below 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;
}

see demo