Comments on: How to Hide Android WebView Highlight Border (or change it’s color)

By: eggdeng

eggdeng — Sun, 27 Mar 2011 10:03:25 +0000

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.

By: caseNova

caseNova — Tue, 25 Jan 2011 06:28:06 +0000

Anybody knows how to change the focus color from orange to say blue etc.?
Thanks

By: Jason

Jason — Mon, 08 Nov 2010 20:22:33 +0000

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?

By: Dan

Dan — Sat, 04 Sep 2010 04:59:18 +0000

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

By: Andy

Andy — Fri, 27 Aug 2010 14:22:06 +0000

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

By: Dan

Dan — Mon, 16 Aug 2010 00:36:04 +0000

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.

By: daniel

daniel — Tue, 03 Aug 2010 18:35:19 +0000

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!

By: RussellUresti

RussellUresti — Tue, 20 Jul 2010 19:58:05 +0000

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?

By: Andres Yajamin

Andres Yajamin — Mon, 05 Jul 2010 17:25:20 +0000

Thanks men, great tip