cssangularangular-materialmaterial-designangular-material2

how to change Angular 6 material radio button outer ripple color


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


Solution

  • 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.