CODEWITHSUNDEEP
angular
user9754798
user9754798

Reputation: 443

Remove Angular Material toggle button focus styling

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>

Upvotes: 0

Views: 1935

Answers (3)

Andrew Alderson
Andrew Alderson

Reputation: 1018

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.

Upvotes: 0

Kavinda Senarathne
Kavinda Senarathne

Reputation: 2004

Try this :

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

Upvotes: 1

Oleksii Pavlenko
Oleksii Pavlenko

Reputation: 1333

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

Upvotes: 0

Related Questions