Prevent clickable div from being highlighted in Android WebView-ThrowExceptions

Exception or error:

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:

WebView screenshot

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

How to solve:

Put below code in the CSS file:

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

###

On galaxy devices “-webkit-tap-highlight-color” only works with

-webkit-tap-highlight-color:transparent;

Leave a Reply

Your email address will not be published. Required fields are marked *