How to remove the blue highlight of button on mobile?

Question

I try to remove the blue box that appears on click in front of buttons as you can see below: My button

Before asking, I have made a lot of research, I have tried the solutions given by the following topics:

I have tried all the answers! It works on computer but not on mobile.

If you are using a computer, you can try by simulating mobile with the inspector. Here is the button: https://jsfiddle.net/t4ykshst/

#add {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    outline: none;
    cursor: pointer;
    padding: 10px;
    overflow: hidden;
    border: none;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    background: #1abc9c;
    -webkit-box-shadow: 0 4px 3px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 3px 2px rgba(0, 0, 0, 0.2);
}

#add:active {
    opacity: 0.85;
    -webkit-box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.2);
}

<input type="button" id="add" value="+" title="" style="position: absolute; left: 0px; top: 0px; width: 52px; height: 52px;" />

https://jsfiddle.net/t4ykshst/3/ – Daniel Sixl Jul 12 '17 at 10:34 — Daniel Sixl, Jul 12 '17 at 10:34
Your example works fine for me. – BarryCap Jun 09 '21 at 07:45 — BarryCap, Jun 09 '21 at 07:45

score 342 · Accepted Answer · edited Jan 14 '23 at 11:57

342

You can add:

-webkit-tap-highlight-color: transparent;

You can also add this to your stylesheets to define it globally:

input,
textarea,
button,
select,
a {
    -webkit-tap-highlight-color: transparent;
}

Refer to here for more information.

edited Jan 14 '23 at 11:57

Roj

995
1
8
22

answered Jul 12 '17 at 06:47

Aslam

9,204
4
35
51

4

are there other vendor prefixes for other service providers? is this standardized yet? – oldboy May 22 '19 at 23:46
4

don't forgot to add div :) – krychuq Jul 07 '20 at 20:43
Finally! this is what I was looking for - thank you – Blue Bot Jul 15 '20 at 18:00
1

I know I shouldn't comment like this, but this is awesome. Thanks. – Gass Jul 13 '21 at 04:27
1

Tailwind equivalent: `@layer base { html { -webkit-tap-highlight-color: transparent; } }` https://css-tricks.com/custom-tailwind-css/ – phyatt Jul 18 '23 at 23:06

score 43 · Answer 2 · edited Aug 12 '20 at 13:10

43

* {
    -webkit-tap-highlight-color: transparent;
}

Test it.

edited Aug 12 '20 at 13:10

TOPKAT

6,667
2
44
72

answered Aug 12 '20 at 08:02

M.SAM

427
4
5

score 7 · Answer 3 · answered Jul 22 '21 at 15:29

7

You just need to add style="-webkit-tap-highlight-color: transparent;"

answered Jul 22 '21 at 15:29

srikar kandula

81
1
1

Artur INTECH · Answer 4 · 2021-06-09T08:40:16.393

5

There will be no highlighting (at least in Chrome 88+) at all if you remove cursor: pointer from #add selector. And if you need it in the "desktop" mode, use something like this:

@media (min-width: 768px) {
    #add {
        cursor: pointer;
    }
}

edited Jun 09 '21 at 08:40

answered Feb 15 '21 at 14:19

Artur INTECH

6,024
2
37
34

1

There are many mobile screens larger than 768px, and it will not have any effect on those screens. – BarryCap Jun 08 '21 at 19:55

Steven.Chang · Answer 5 · 2021-12-17T02:28:44.787

3

-webkit-tap-highlight-color is a non-standard feature (mdn). It won't work in browser like safari 14.

Instead, you can use

{ outline: none; }

or apply it specifically through selector

a:focus,a:visited,a:active{
  outline: none;
}

edited Dec 17 '21 at 02:28

answered Aug 25 '21 at 03:59

Steven.Chang

83
6

Dans · Answer 6 · 2022-02-01T14:32:10.233

1

Try it

add to the button style "cursor: default;"

This will make a cursor:pointer; it turns into a "default", but will remove the blue shadow on the buttons on the mobile screen as you want

edited Feb 01 '22 at 14:32

answered Feb 01 '22 at 14:26

Dans

19
2

thanks. I was just about to answer the same. What a crazy thing the cursor causing back color to change. Almost 1 hour lost with this! – Ivan Ferrer Villa Mar 25 '22 at 19:51

score 0 · Answer 7 · answered Jul 19 '22 at 16:22

0

In addition to all the answers here, you have to also specify the background css property explicitly yourself to the button.

answered Jul 19 '22 at 16:22

Nathan B

1,625
1
17
15

How to remove the blue highlight of button on mobile?

7 Answers7

Linked

Related