MatRipple Continues To Show No Matter What

user_11858000 0
Viewed 2481

I have a very limited space around the mat-radio-button element so I wanted to disable it. It is half disabled but, on hover action, it's "ghost" continues to show on hoverlike below;

on hover

This is my mat-radio-button;

<mat-radio-button  [disableRipple]="true" [checked]="element == expandedElement"(change)="ShowDetail(element)" ></mat-radio-button>

And to be clear, [disableRipple] disables the effect that shows on onclick but not the effect on hover. Anybody have a solution that might help me?

This is what I've tried but doesn't work which is located at the styles.css of the component (When doing document.querySelectorAll() this gives the ghost part);

span.mat-ripple-element.mat-radio-persistent-ripple{
  display: none !important;
}

Stakblitz that shows disableRipple only removes the ripple that is shown on onlick event : example (Auto is the one with disableRipple attribute)

angular-material angular css html
2 Answers

To remove the ripple effect you can just add the following to your styles.scss file:

.mat-radio-ripple {
  display: none;
}

As you can see here: https://stackblitz.com/edit/angular-ehgpd2-2hvt7s?file=src/styles.scss

This removes the ripple to the material radio buttons.

To remove it for all mat elements you can just do:

.mat-ripple { display: none; }

To remove if just for checkboxes:

.mat-checkbox-ripple { display: none; }

etc...

As you can see here: https://github.com/angular/components/issues/17404

(Also please note that as mentioned in the guthub issue the ripples on focus/click are there for accessibility, that's the reason why they're difficult to get rid of, I think you should keep that in mind and do something on a mat radio that if active or has focus)

user_136938180

To remove the background color on hover. Add below css in your style.css/style.scss file.

.mat-radio-container:hover .mat-radio-persistent-ripple {
  opacity: 0 !important;
}
user_12897130
Related