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);