CODEWITHSUNDEEP
htmlcssmobile
Ashoka Mondal
Ashoka Mondal

Reputation: 1171

-webkit-tap-highlight-color is not working

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..

Upvotes: 8

Views: 21213

Answers (5)

Diego Gnoatto
Diego Gnoatto

Reputation: 7

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;                 
    }

Upvotes: -1

Jarir
Jarir

Reputation: 357

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)";

Upvotes: 0

prograhammer
prograhammer

Reputation: 20590

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.

Upvotes: 9

NoobEditor
NoobEditor

Reputation: 15891

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

Upvotes: 0

Sajad Karuthedath
Sajad Karuthedath

Reputation: 15767

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' */
}

Upvotes: 13

Related Questions