Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 894
Ulad Kasach Avatar asked Sep 06 '14 20:09

Ulad Kasach


People also ask

How do I remove blue highlight on click?

Answer: Use the CSS ::selection pseudo-element By default, when you select some text in the browsers it is highlighted normally in blue color. But, you can disable this highlighting with the CSS ::selection pseudo-element.

What is Webkit tap highlight color?

-webkit-tap-highlight-color is a non-standard CSS property that sets the color of the highlight that appears over a link while it's being tapped. The highlighting indicates to the user that their tap is being successfully recognized, and indicates which element they're tapping on.


2 Answers

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

like image 126
Ulad Kasach Avatar answered Sep 29 '22 22:09

Ulad Kasach


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;
like image 23
Oboo Cheng Avatar answered Sep 29 '22 21:09

Oboo Cheng