'Disable Blue Highlight when Touch/Press object with Cursor:Pointer

There is a blue highlight that appears whenever a Div that has the cursor:pointer property applied is touched in Chrome. How can we get rid of it?

I have tried the following:

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

But they do not affect the blue highlighting on press of a cursor.

htmlcssmobiletouchhighlight


Solution 1:[1]

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

Takes care of the problem, as it sets the highlight color transparent.

Source: http://samcroft.co.uk/2012/alternative-to-webkit-tap-highlight-color-in-phonegap-apps/

Solution 2:[2]

As far as I have known,Vlad K's answer could cause problems in some android devices.Better solution:

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

Solution 3:[3]

Simply add this to your stylesheet and simply add the class="no_highlights" attribute to the element you wish to apply this class to. 

no_highlights{
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

or you can do this globally for all the elements by removing class name and doing this. 

button,
textarea,
input,
select,
a{
 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 -webkit-tap-highlight-color: transparent;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
  user-select: none;

}

Thanks :) but anyway. blue border is there as a accessibility feature. Its looks bad but, Its helps someone who needed it most.

Solution 4:[4]

According to the docs you can simply do this:

-webkit-tap-highlight-color: transparent; /* for removing the highlight */

It works for me on Chrome 68 for Android and Chrome 80 on Windows.

Solution 5:[5]

add to css

css

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

tailwind

@layer base {
  html {
    -webkit-tap-highlight-color: transparent;
  }
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ulad Kasach
Solution 2
Solution 3
Solution 4 Eric Mutta
Solution 5

Related Questions