How to remove hover color from mat radio button in angular?

Question

I am working on a project. It is requirement of a project to remove hover color from mat radio button. I have tried many things but nothing works for me. My current styling is as follow:

::ng-deep .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
  opacity: 0.5 !important;     /*click effect color change*/
  background-color: transparent !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*/
}

I have spent a lot of time on it. If someone knows who to solve it then please let me know. Thanks

Answer 1

Basically, you want to remove ripple effect. To remove ripple effect on mat radio button, you can do it like this:

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