» posted on Saturday, February 27th, 2010 at 6:20pm by Dan
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)
filed under Code · How To's | 6 comments
6 Responses to “How to Hide Android WebView Highlight Border (or change it’s color)”
Leave a Reply
» Keywords
army
asp
buffer
cell phone
Code
css
domain tools
domain valuation
free flv player
freelance
free mp3 player
free mp4 player
google pagerank
haval
internet through cell phone
loading
md5
motorola razr
phone
PR
recordset
sha1
sha256
sha384
sha512
snefru
soldiers
voice mail
web flv player
website monitoring
Web Tools
Andres Yajamin said:
Jul 05, 10 at 12:25pmThanks men, great tip
RussellUresti said:
Jul 20, 10 at 2:58pmThis 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?
daniel said:
Aug 03, 10 at 1:35pmThis 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!
Dan said:
Aug 15, 10 at 7:36pmI 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.
Andy said:
Aug 27, 10 at 9:22amHi, 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
Dan said:
Sep 03, 10 at 11:59pmIt’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);
}