How can I remove the select box from angular mat-menu?

Question

I am using angular 6.1.3, and angular/material 6.4.5 (all in latest version) But when I run the following code, it always has a blue select box.

I tried this on both chrome and IE, and both has the same problem.

Is there any way to remove the blue box?

Thanks!

<mat-menu #usermenu [overlapTrigger]="false">
        <button mat-menu-item>
                <mat-icon>face</mat-icon>
                <label>Profile</label>
            </button>

            <button mat-menu-item>
                <mat-icon>exit_to_app</mat-icon>
                <label>Logout</label>
            </button>
</mat-menu>

do you mean to the blue border around the first button? – לבני מלכה Aug 16 '18 at 12:19 — לבני מלכה, Aug 16 '18 at 12:19
I guess it is the outline so you can try `outline: none` – SuperDJ Aug 16 '18 at 12:25 — SuperDJ, Aug 16 '18 at 12:25
yes, the blue border around the first button – Lang Aug 16 '18 at 13:20 — Lang, Aug 16 '18 at 13:20

score 15 · Accepted Answer · answered Aug 16 '18 at 13:24

15

I solved this problem by @SuperDJ's comment,

Added css "outline: none" to my button

Hope this may help who has the same problem with me.

answered Aug 16 '18 at 13:24

Lang

943
13
33

7

button.mat-menu-item{ outline:none; } – sadati boina Jan 11 '20 at 00:51

How can I remove the select box from angular mat-menu?

1 Answers1