Angular Material - change color of md-radio-button

Question

How can the default color of radio buttons be changed in Angular Material2? I read a few questions on this topic but none of them solve this problem. How can I set green, yellow and red color for an element with class md-radio-button?

Solution

You can use this rule for the color of the center of your radio button :

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

This one for the border :

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

And this one for the circle which appears when you click on the radio button :

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

Here is a working example.

Comments

[user]

It's not working in my example. I use Angular 4, maybe it's a reason

[JeanJacques]

@user I guess you are using Angular Material 2. So I updated my answer to make it works for Angular Material 2.

[user]

Thanks. But now I have one question more. In one form I have three radio buttons and I need first to be red, second yellow and third green. Can I resolve this scenario?

[JeanJacques]

@user Yes of course it's possible, you need to add a class to your elements (by example blueRadioButton to the one you want blue) and to add a reference to this class in your selector like this : .blueRadioButton.mat-radio-button.mat-accent .mat-radio-inner-circle and you do the same for the three rules

[user]

Thanks! It works. But I had to add these classes to style.css. When I added it to radio-overview-example.css this didn't work. What can be reason?

[Mustafa Mohammadi]

didn't work for me. Angular 6