Blue overlay of OnClick

Question

When I display a html page in Android WebView, there is always a blue overlay on the clicked element which has a href or a javascript function hooked. How do I get rid of this blue overlay?

enter image description here

Source Code

<html>
    <head>
    <title>Blue Overlay</title>
    <style>
    *{margin:0;padding:0;/* get rid of the default 2 pixels margin */
    } 
    body{background-color: #000000;}

    /* button-related CSS */
    a.button{
        background: url("img/icon_bt.png") no-repeat scroll center center transparent;
        display: block;
        text-decoration: none;/*remove the blue underline*/
        width: 70px;
        height: 70px;
        margin: 50px;
    }
    a.button:active{
        background-image: url("img/icon_bt_pressed.png");
    }

    </style>
</head>
<body>
    <a class="button" href="#"></a>
    </body>
</html>

Maybe this is related? http://stackoverflow.com/questions/7398763/android-browser-remove-outline-border-when-anchor-is-focused — , Jan 02 '13 at 00:48

score 23 · Accepted Answer · edited May 23 '17 at 10:29

23

I've tried it with a different image, and it seems to work. Basically, I just added what was suggested in a different topic:

a:button {
    ...
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

edited May 23 '17 at 10:29

Community

1
1

answered Jan 02 '13 at 00:59

score 0 · Answer 2 · answered Jan 02 '13 at 00:48

0

I am not sure, but maybe the image has the blue overlay (and not only the link resp. a-tag). So get rid of it by i.e. border: 0; ...

answered Jan 02 '13 at 00:48

Chris

739
2
8
23

Blue overlay of OnClick

2 Answers2