how to change Angular 6 material radio button outer ripple color

Question

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.

Lahey

material.angular.io/guide/theming – Lemmy

I wanted to have different color other than theme colors.. – Lahey

Answer 1

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.

Posticous

Thanks Radak..In DOM I can only able to find radio button outer circle and inner circle elements and able to change color. How u people found radio ripple element in DOM. Can u pls share ur knowledge on this. – Lahey

Your welcome,to answer your question.Using developer tool is Chrome or Firefox inspector or any other browser,you can inspect every element by choosing inspect and click on wanted element (in this case mat-radio-button),it will show you in console elements section,element with everything attached to it. – Posticous

Yeah..using the way only I got access to outer and inner circle of radio button. And i have changed the color. But the problem what i have got is, I can't able to figure out exact ripple element. Can u help me out please. u know i wanted to change the check box color also. this time i wanted to change on my own.. – Lahey

::ng-deep only works if you have Emulated view encapsulation. Taking those off sort of works. The 2nd two do the job, but the first just changes the background color where the ripple exists and not the actual ripple color itself. – Smock

Answer 2

The only way to customize Angular material is to override the css rules, so the solution will be to override the css ripple rules for radio button:

.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
     background-color: rgba(0, 0, 0, .1) !important;
 }

Bathrobe

Answer 3

I had a gold color for the default theme (on a white form) and I needed to change it to brown (on white). I needed the the inner & outer circle brown when selected, the outer circle brown when not selected. I also needed the ripple effect to match. Here is the result that works:

  & .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
    background-color: brown !important; // Override material
  }

  & .mat-radio-button.mat-accent .mat-radio-inner-circle {
    background-color: brown !important; // Override material
    z-index: 3;
  }

  & .mat-radio-button .mat-radio-outer-circle {
    border-color: brown !important; // Override material
    z-index: 3;
  }

No changes in opacity needed.

Smock

Answer 4

In my scenario:

// CSS
:host ::ng-deep .mat-radio-button.mat-mycolor.mat-radio-checked .mat-radio-outer-circle {
  border-color: blue !important;
}

:host ::ng-deep .mat-radio-button.mat-mycolor .mat-radio-inner-circle {
  background-color: blue !important;
}

:host ::ng-deep .mat-radio-button.mat-mycolor .mat-ripple-element {
  background-color: blue !important;
}

// HTML
<mat-radio-group [(ngModel)]="selectedAction">
  <mat-radio-button [color]="radioColor" [style.color]="textColor" [value]="action" *ngFor="let action of actions">{{action}}</mat-radio-button>
</mat-radio-group>  

// TS
textColor: string = "#ff0000";
radioColor: string = "mycolor";
actions: string[] = ["Take a walk", "Mow the lawn"];
selectedAction: string = this.actions[0];

Noelyn

Answer 5

change the color of the mat radio button paste the following in your module.

The default color for radio buttons can be configured globally using the MAT_RADIO_DEFAULT_OPTIONS provider

providers: [{ provide: MAT_RADIO_DEFAULT_OPTIONS, useValue: { color: 'primary' }, }]

Lithoid

Answer 6

For me this worked

    ::ng-deep .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle  {
      border-color: #353535 !important;
    }
    
    ::ng-deep .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle {
      border-color: #585858 !important;
    }

Congregate