Disable orange highlight on a div in WebView

Question

I am making an PhoneGap Android app, and can't turn off the orange highlighting clickable elements.

I have tried all combinations of CSS: -webkit-tap-highlight-color, -webkit-focus-ring-color and -webkit-user-modify, as suggested in

Disable orange outline highlight on focus
Disable orange highlight around links in Android

Here is what I have, and it's not doing anything:

`* {  
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important;   
    -webkit-focus-ring-color: rgba(255, 255, 255, 0) !important;  
    outline: none !important;  
    -webkit-user-modify: read-write-plaintext-only !important;  
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}`

I'm using Phonegap 2.9.0 and Android 4.1.2, and Calendario plugin from here:
http://tympanus.net/codrops/2012/11/27/calendario-a-flexible-calendar-plugin/

Is there any hope for disabling this unsightly organe thing?

score 9 · Answer 1 · edited Apr 23 '16 at 21:13

9

Maybe you are talking about the outline set by focus, so this should help (not tested):

div:focus, div:active {
    outline: none;
}

edited Apr 23 '16 at 21:13

AnuroopTheGeek

15
5

answered Sep 05 '13 at 12:18

rotoxl

159
4

2

I'm surprised this answer isn't getting more love. This the only thing that worked for me in Android 4.0. Note that there is a typo above -- it should be `div:focus, div:active { outline: none; }` It may be useful to verify that this property has an effect. I used the following to do so: `div:focus { outline:1px solid green; } div:focus { outline:1px solid red; }` – Brian Rak Dec 02 '13 at 23:35
This is also the only thing that worked for me with Android 4.x (using Brian Rak's version with the typos corrected) – BenV Jan 10 '14 at 15:14
Worked for me also, Android 4.x including Samsungs. I was looking for removing the outline on buttons with font icons, so I just added "button:focus, button:active" to the selector. Worked flawlessly ;) – John Bernardsson Nov 21 '14 at 11:28

score 4 · Answer 2 · answered Sep 05 '13 at 12:45

4

You can try by using

* {-webkit-tap-highlight-color: transparent;}

answered Sep 05 '13 at 12:45

sourav

676
5
21

score 1 · Accepted Answer · answered Sep 03 '13 at 21:33

1

div{
-webkit-appearance:none;
}

answered Sep 03 '13 at 21:33

Evan Stoddard

718
1
7
21

Thanks, but unfortunately, orange thing is still there. I'm trying this out on Samsung Galaxy Note 10.1, but I'll try it on some other devices soon and report. – JavaScript Warrior Sep 03 '13 at 23:22

Disable orange highlight on a div in WebView

3 Answers3

Linked