Css – how to change Angular 6 material radio button outer ripple color

angularangular-materialangular-material2cssmaterial-design

I wanted to change Angular Material Radio button default color. I can only able to change to radio button color. 

<mat-radio-group>
  <mat-radio-button value="1">Option 1</mat-radio-button>
  <mat-radio-button value="2">Option 2</mat-radio-button>
</mat-radio-group>

But I can't able to change outer ripple effect color when we click option. Some one please help me to solve this.

enter image description here

Best Answer

Here is solution to completly style mat-radio button

  ::ng-deep .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
        opacity: 0.5 !important;     /*click effect color change*/
        background-color: blue !important;
  }

  ::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle {
        background-color: blue!important;   /*inner circle color change*/
  }

  ::ng-deep.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
       border-color:blue!important; /*outer ring color change*/
  }

Hope is helpful.

Related Topic