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

html css mobile touch highlight
Ulad Kasach picture Ulad Kasach · Sep 6, 2014 · Viewed 47.6k times · Source

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.

Answer

Ulad Kasach picture Ulad Kasach · Sep 6, 2014 
-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/

Related questions

Make element unclickable (click things behind it)

I have a fixed image that overlays a page when the user is in the act of scrolling a touch screen (mobile). I want to make that image "unclickable" or "inactive" or whatever, so that if a user touches and …

Read More
Make an image responsive - the simplest way

I notice that my code is responsive, in the fact that if I scale it down to the size of a phone or tablet - all of the text, links, and social icons scale accordingly. However, the ONLY thing that …

Read More
How can I "disable" zoom on a mobile web page?

I am creating a mobile web page that is basically a big form with several text inputs. However (at least on my Android cellphone), every time I click on some input the whole page zooms there, obscuring the rest of …

Read More