Android browser - remove outline border when anchor is focused

css webkit android-browser
hsz picture hsz · Sep 13, 2011 · Viewed 10.7k times · Source

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 !

Answer

Sajid picture Sajid · Sep 13, 2011

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.

Related questions

How to remove the border highlight on an input text element

When an HTML element is 'focused' (currently selected/tabbed into), many browsers (at least Safari and Chrome) will put a blue border around it. For the layout I am working on, this is distracting and does not look right. <…

Read More
Custom CSS Scrollbar for Firefox

I want to customize a scrollbar with CSS. I use this WebKit CSS code, which works well for Safari and Chrome: ::-webkit-scrollbar { width: 15px; height: 15px; } ::-webkit-scrollbar-track-piece { background-color: #C2D2E4; } ::-webkit-scrollbar-thumb:vertical { height: 30px; background-color: #0A4C95; } How can …

Read More
CSS transition shorthand with multiple properties?

I can't seem to find the correct syntax for the CSS transition shorthand with multiple properties. This doesn't do anything: .element { -webkit-transition: height .5s, opacity .5s .5s; -moz-transition: height .5s, opacity .5s .5s; -ms-transition: height .5s, opacity .5s .5s; transition: …

Read More