Disable orange highlight around links in Android

Question

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.

Answer 1

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.

Answer 2

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