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.
![[del.icio.us]](http://www.randomtools.net/wp-content/plugins/bookmarkify/delicious.png)
![[Digg]](http://www.randomtools.net/wp-content/plugins/bookmarkify/digg.png)
![[Facebook]](http://www.randomtools.net/wp-content/plugins/bookmarkify/facebook.png)
![[Google]](http://www.randomtools.net/wp-content/plugins/bookmarkify/google.png)
![[Reddit]](http://www.randomtools.net/wp-content/plugins/bookmarkify/reddit.png)
![[Slashdot]](http://www.randomtools.net/wp-content/plugins/bookmarkify/slashdot.png)
![[StumbleUpon]](http://www.randomtools.net/wp-content/plugins/bookmarkify/stumbleupon.png)
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.