Remove Angular Material toggle button focus styling

Question

I'm trying to remove the focus styling from the mat-button-toggle element that Ng material offers. Reason being that it looks quite ugly.

I've tried the below but it has zero effect.

.mat-button-toggle:focus{
    outline: none !important;
    border: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

and

.mat-button-toggle-button:focus{
  outline:none;
}

HTML

<form [formGroup]="form" class="mt-4">
        <mat-button-toggle-group formControlName="userChoice" class="button-group">
          <mat-button-toggle class="option-button">Button</mat-button-toggle>
        </mat-button-toggle-group>
      </form>

Answer 1

Try this :

.mat-icon-button ::ng-deep .mat-button-focus-overlay {
    display: none;
}

Answer 2

Because it's button and for it you needs use pseudo class active

.mat-button-toggle:active{
    outline: none !important;
    border: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

Answer 3

You need to be more clear. What focus styling do you mean? It looks like you are trying to remove the focus outline that is applied by the browser. Adding a style rule of

.mat-button-toggle:focus{
  outline:none;
}

does remove the focus outline. I tried this and it works.

Also, from a usability standpoint you shouldn't remove focus styling - it is there for a reason. If you think it is ugly you should restyle it.