Prevent clickable div from being highlighted in Android WebView

Question

I'm using a full-screen WebView in an Android app, using API level 15. There are some on/off switches that I'm making clickable with jQuery's .click function. The approach works fine, but the click handler causes the button to be highlighted in a transparent shade of blue when the element is tapped, and it's unsightly.

None of these approaches worked to prevent the element from being highlighted:

CSS Approach

div.pill {     outline: none; } 

Click Approach

$("div.pill").click(function(Event) {     // ... other code here ...     Event.stopPropagation();     Event.preventDefault();     return false; }); 

Mousedown Approach

$("div.pill").mousedown(function(Event) {     // ... other code here ...     Event.stopPropagation();     Event.preventDefault();     return false; }); 

Here is an example of the div with a blue highlight:

Does anyone know how to prevent a clickable div from being highlighted when it's clicked?

Answer 1

Put below code in the CSS file:

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