-webkit-tap-highlight-color is not working

Question

I am trying to remove tap highlight color. But it is not working mobile. When i am trying to see using inspect element on pc it is also not showing.

My css is

button, button:hover, li:hover, a:hover , li , a , *:hover, *
{
  -webkit-tap-highlight-color: rgba(0,0,0,0); 
}

is there any error on my css..

http://stackoverflow.com/questions/3159729/how-can-i-get-webkit-tap-highlight-color-to-highlight-an-entire-div — NoobEditor, Dec 31 '13 at 07:02
I have found one more question http://stackoverflow.com/questions/5210481/disable-orange-outline-highlight-on-focus — Ashoka Mondal, Dec 31 '13 at 07:08

score 13 · Accepted Answer · answered Dec 31 '13 at 07:02

use both:

-webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent;

OR

* {
    -webkit-touch-callout:none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust:none;             /* prevent webkit from resizing text to fit */
    -webkit-tap-highlight-color:rgba(0,0,0,0); /* prevent tap highlight color / shadow */
    -webkit-user-select:none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
}

Doing all of these will hurt accessibility big time. – Neurotransmitter Jan 20 '21 at 11:49 — Neurotransmitter, Jan 20 '21 at 11:49

score 7 · Answer 2 · answered Jun 22 '17 at 16:03

7

I thought I'd add to the accepted answer...

Using cursor: pointer will also cause the tap highlight to persist (even after setting -webkit-tap-highlight-color). Make sure to remove it on the element or parent it's inheriting from.

answered Jun 22 '17 at 16:03

prograhammer

20,132
13
91
118

I struggled a lot until finding your answer. But it's odd though that `cursor: pointer` doesn't interfere when `-webkit-user-select` is defined in the same declaration, or when defined directly inside the style attribute of a tag. – Noberto Pessôa Sep 14 '17 at 23:56
[UPDATE] I meant `-webkit-tap-highlight-color`. And now it's working even with `cursor: pointer`. I don't get it. – Noberto Pessôa Sep 15 '17 at 00:31
:( oh,, that's no fun. I wanted to provide PC users with pointer cursor for any interactive element, but avoiding unnecessary tap highlight on mobile... – vintprox Sep 12 '19 at 20:28
you just saved my precious time, why would chrome do that to us? Chrome.. come on.. – vdegenne Jan 16 '23 at 12:34

score 0 · Answer 3 · answered Dec 31 '13 at 07:03

0

adding -webkit-user-select: none; helps at times!!

answered Dec 31 '13 at 07:03

NoobEditor

15,563
19
81
112

score 0 · Answer 4 · answered Sep 20 '17 at 21:26

My divs appeared to get highlighted, even though I used the necessary CSS tags to remove the highlight color. This only happened in Android WebView API 26.

After a lot of tinkering, it turned out that this had nothing to do with the highlight color. The div's transparent background color was briefly rendered fully opaque as it started a transition. To fix this, I simply replaced this transparent color:

div.style.background = "rgba(0, 0, 255, .05)";

... with a similar opaque color:

div.style.background = "rgba(246, 246, 255, 1)";

Diego Gnoatto · Answer 5 · 2018-02-06T20:13:36.527

-1

I injected this code into a <style> tag on <header> on a Muse website and worked perfectly for me:

   * {
        -webkit-touch-callout:none;               
        -webkit-text-size-adjust:none;          
        -webkit-tap-highlight-color:rgba(0,0,0,0);
        -webkit-user-select:none;                 
    }

edited Feb 06 '18 at 20:13

answered Feb 06 '18 at 20:07

Diego Gnoatto

7
2

Welcome to Stack Overflow, when answering here please consider adding explanation and in which way your solution helps fixing the problem, this helps to both OP and other people looking for similar problem. – FilipRistic Feb 06 '18 at 20:15

-webkit-tap-highlight-color is not working

5 Answers5

Linked