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>

Kavinda Senarathne · Accepted Answer · 2020-11-24 23:51:44Z

1

Try this :

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

answered Nov 24, 2020 at 23:51

Kavinda Senarathne

2,02015 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Oleksii Pavlenko · Accepted Answer · 2020-11-24 19:43:40Z

0

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

answered Nov 24, 2020 at 19:43

Oleksii Pavlenko

1,3331 gold badge12 silver badges25 bronze badges

1 Comment

user9754798 Over a year ago

Neither of my examples work even when using :active

Andrew Alderson · Accepted Answer · 2020-11-25 02:30:47Z

0

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.

answered Nov 25, 2020 at 2:30

Andrew Alderson

1,0287 silver badges18 bronze badges

Collectives™ on Stack Overflow

Remove Angular Material toggle button focus styling

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related