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

HtmlCssMobileTouchHighlight

Html Problem Overview


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.

Html Solutions


Solution 1 - Html

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

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

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

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

add to css

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionUlad KasachView Question on Stackoverflow
Solution 1 - HtmlUlad KasachView Answer on Stackoverflow
Solution 2 - HtmlOboo ChengView Answer on Stackoverflow
Solution 3 - HtmlasithView Answer on Stackoverflow
Solution 4 - HtmlEric MuttaView Answer on Stackoverflow
Solution 5 - HtmlLeulAriaView Answer on Stackoverflow