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

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

CodePudding user response：

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;
}