How to Hide Android WebView Highlight Border (or change it’s color)
Here's one that had me at a loss for a long time that I just figured out. You can easily remove the highlight border (the border that comes up when an element is focused) or change it's color in a WebView with CSS! The WebKit-specific property "-webkit-tap-highlight-color" is what you're looking for.
The following line will disable it on a page completely:
1 2 3 | * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } |
rgba() is just like rgb(), but it takes a 4th parameter for opacity. It's my belief that this would probably work for iPhone WebView's as well, since both Chrome and Safari are based off of WebKit.
Thanks men, great tip
This seems to work to disable it completely, but I tried to change it’s color using this:
-webkit-tap-highlight-color: rgba(255, 255, 255, 1);
Which should turn it to a solid white, but on android devices I get the default solid green. Is there a trick to getting a different color?
This is perfect! How do you discover stuff like this? I spent 3 hours trying to find out. Someone at stack/overflow pointed me here. Thanks so much!
I knew that the browser on Android is based on WebKit, just like iPhone’s Safari Mobile, so I looked for the solution for iPhone and tried it on Android.
Hi, Where do i actually put the
* {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
to make this work.
Sorry, but i’m a newbie
It’s CSS, so you can put it in an external stylesheet, or inside of an HTML page with a style tag.
* {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
I’ve tried this approach and it works fine, but is there a way to remove the focus border box? If you don’t know what you’re referring to, go browse anything using the android default browser. If you tap on a text input element, the highlight box (usually orange or green depending on OS version) appears. Adjacent to this highlight box is an inner black/gray rectangle.
With the below CSS styling, my text input element has no border by default (which is what I need), but when it gets tapped, the rectangle mentioned above appears without the tap-highlight.
border-style:none;
outline-style:none;
display: inline-block;
-webkit-appearance: textarea;
-webkit-tap-highlight-color: rgba(0,0,0,0);
Does anyone know how to remove it?
Anybody knows how to change the focus color from orange to say blue etc.?
Thanks
Using -webkit-tap-highlight-color: rgba(0, 0, 0, 0) has nasty side-effects like disabling the NEXT button on the virtual keyboard. This remains an annoying bug.
thanks
thanks a lot.