8

I've tried a million times to remove the annoying orange highlight box around links on Android webview, but they don't seem to go away. And no, this does not work:

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

I'm really perplexed here, any other ideas? I'm testing on Galaxy S3.

kaleazy
  • 5,922
  • 2
  • 47
  • 51
  • I don't think this is a css issue, but something to do with the WebView - not sure – midhunhk Oct 01 '12 at 08:03
  • After some testing, it doesn't look like it's possible to disable the highlighting for a-href links, but this works successfully for everything else. – kaleazy Oct 01 '12 at 08:22
  • I've got that style set on the _body_ tag and it works perfectly. It should work with '*' as well, not sure why it doesn't for you. – codemonkey Oct 01 '12 at 09:01
  • @kaleazy do you found any solution for this problem ? I am also suffering with same issue ... – Ravi Kumar Mistry Nov 07 '14 at 06:55

3 Answers3

6

Try

* {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-user-modify: read-write-plaintext-only;
}

from here. Turns out the real tricky bit is that second property, user-modify. I think that's a requirement since 4.0.4, which happens to affect the Galaxy S3, among others.

You can narrow the scope of the selector, but it has to affect the parent of the link, e.g. a <p> or <li>, not the link itself.

Community
  • 1
  • 1
Max
  • 4,882
  • 2
  • 29
  • 43
  • 1
    Note that the user-modify property does cause the keyboard to pop up on iOS, which is usually undesirable. – Max Nov 09 '12 at 21:04
  • Just wanted to mention that this is the solution for orange highlighting for Samsung Galaxy tablet as well in the native Internet browser. – Komsomol Jan 04 '13 at 11:22
1

Additionally, on the newer Amazon Fire Tablets and FireTV devices, you can be presented with a "focus ring" that might be interfering with your app's desire to manage it's own focus. Typically this only appears after touching the screen rapidly or in the case of the FireTV device, holding down one of the arrow keys.

This causes a thin, typically orange-colored "ring" to appear around focused elements - or at least the elements that the Android code in those devices "thinks" has focus - in the same way focus is moved by pressing the tab key in a browser window.

You can remove this focus on the Amazon devices by inserting this into an appropriate place in your CSS code:

*:focus {
outline: none; }

Fatlion
  • 11
  • 2
0

On galaxy devices "-webkit-tap-highlight-color" only works with

-webkit-tap-highlight-color:transparent;

Then to change the color, add the following style on the desired elements

a:active,
a:hover,
a:focus {
    background: rgba(255, 255, 255, .5);
}
Séverin
  • 137
  • 1
  • 6