How to remove blue-box-fill when clicking the buttons?

Question

Here's a gif that I've screen recorded on my device where you can see the blue-box-fill that I'm talking about:

I've tried doing this:

* {
  user-select: none;
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
};

button, 
button:active, 
button:focus {
  outline: none;
};

But it doesn't do the trick of getting rid of that blue-box-fill, since it's not really a focus border or outline.

Does this answer your question? [How to remove Firefox's dotted outline on BUTTONS as well as links?](https://stackoverflow.com/questions/71074/how-to-remove-firefoxs-dotted-outline-on-buttons-as-well-as-links) — Stephane Vanraes, Jul 17 '20 at 06:04
No, the problem's not the border or the outline @StephaneVanraes because I've already taken care of that. Have you watched the video attached carefully? — Zedd, Jul 17 '20 at 06:07
If your browser is firefox, it has an extra border that is neither the border not the outline, this is what is explained in the linked question. I will be honest, I do not really see the problem in your video, maybe you can post a screenshot as well ? — Stephane Vanraes, Jul 17 '20 at 06:09
Does this answer your question? [Disable Blue Highlight when Touch/Press object with Cursor:Pointer](https://stackoverflow.com/questions/25704650/disable-blue-highlight-when-touch-press-object-with-cursorpointer) — cam, Jul 17 '20 at 06:12

cam · Accepted Answer · 2021-08-06T02:26:08.903

15

The property you're looking for is tap-highlight-color

-webkit-tap-highlight-color: transparent;

edited Aug 06 '21 at 02:26

answered Jul 17 '20 at 06:11

cam

3,179
1
12
15

1

This is just why I hate CSS, was looking at outline, box-shadow, focus-within and anything but this. – Chibueze Opata Feb 20 '23 at 21:21

score 3 · Answer 2 · answered Jul 17 '20 at 06:12

3

I'm guessing this is happening on iOS?

This should prevent the blue box from appearing:

-webkit-tap-highlight-color: transparent;

answered Jul 17 '20 at 06:12

doctypecode

101
5

Thanks for the answer @doctypecode. But no, it's happening on all operating systems, not just on iOS. – Zedd Jul 17 '20 at 06:17

score 0 · Answer 3 · answered Jul 17 '20 at 06:15

I think you want like this ..

button {
  margin: 10px;
  padding: 10px;
  height: 50px;
  width: 50px;
  background: #0095ff;
  border: none;
  border-radius: 40px;
  cursor: pointer;
  color: white;
}

#btn2 {
  outline: none;  
}

<button id="btn1">Click</button>
<button id="btn2">Click</button>

How to remove blue-box-fill when clicking the buttons?

3 Answers3