Android browser - remove outline border when anchor is focused

Question

I am using on my Android app a webview which loades an external page. It has a few anchors (<a> tags). When I press on it, yellow border appears.

How can I prevent it and remove this border ?

I've tried following tricks:

// jQuery
$("a").focus(function(){
    $(this).attr("hideFocus", "hideFocus");
});

// CSS
a, :focus {
    outline: none;
}

but with no success.

Thanks !

Doesn't `:focus` match all elements that can be focused, even button etc ? — hsz, Sep 13 '11 at 08:21

score 46 · Accepted Answer · answered Sep 13 '11 at 08:22

46

Set the CSS property -webkit-tap-highlight-color as follows:

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

Note: setting the color in other ways usually fails because of the way webkit renders the highlight. Depends on version/variant according to my experience.

answered Sep 13 '11 at 08:22

Sajid

4,271
18
14

1

-webkit-focus-ring-color: rgba(0,0,0,0); ? – zloctb Dec 15 '14 at 06:24

score 1 · Answer 2 · answered May 12 '19 at 11:14

1

according to this post it's better to use

a:focus,
button:focus,
input:focus,
textarea:focus {
    outline: none;
}

answered May 12 '19 at 11:14

sorrow poetry

415
4
11

Android browser - remove outline border when anchor is focused

2 Answers2

Linked