Remove blue box when clicked?

Question

I am using Material UI and have never seen this behavior before. It it happening on many of my buttons and would like to change this and just use the ripple effect. I am not sure what is causing this behavior. This blue box stays there until I click away. I would like to not see it at all , thanks!!

Update: This style is being added during :focus but it is not adding an Mui class.

<IconButton>
    <ChevronRightIcon />
</IconButton>

@alisasani just made the edit. I am also seeing it on my ToggleButtons — Matthew Spahr, Mar 05 '21 at 14:17

score 1 · Accepted Answer · answered Mar 05 '21 at 14:22

1

That's called an outline. You can remove it by setting the corresponding css property to none as such:

button:focus {
  outline: none;
}

answered Mar 05 '21 at 14:22

Rax Weber

3,730
19
30

score 0 · Answer 2 · answered Mar 05 '21 at 14:24

I just solved this after a little more investigation into the chrome dev tools.

button:focus {
    outline: 1px dotted;
    outline 5px auto -webkit-focus-ring-color
}

was being added to the button. Not sure from where but adding

button:focus {
    outline: none;
}

to App.css did the job. If anyone can comment below why this was added/why I have never encountered this before, that'd be much appreciated!

Remove blue box when clicked?

2 Answers2