Matériau angulaire - Changer la couleur du bouton radio

Question

Comment la couleur par défaut des boutons radio peut-elle être modifiée dans Angular Material2? J'ai lu quelques questions sur ce sujet mais aucun d'entre eux ne résout ce problème. Comment est-ce que je peux placer la couleur verte, jaune et rouge pour un élément avec la classe md-radio-button?

Answer 1

Vous pouvez utiliser cette règle pour la couleur du centre du bouton radio:

.mat-radio-button.mat-accent .mat-radio-inner-circle { 
    background-color: rgb(66, 134, 244); 
} 

Celui-ci pour la frontière:

.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle { 
    border-color: rgb(66, 134, 244); 
} 

Et celui-ci pour le cercle qui apparaît lorsque vous cliquez sur le bouton radio:

.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element { 
    background-color:rgba(66, 134, 244,.26); 
} 

Here est un exemple de travail.