How to remove active state from mobile webview elements

Question

I'm pulling my hair out here. I believe it must have something to do with the stock browser that is rending the phonegap apps. However I just can't get rid of what I believe is the active state. This does not occur if I browse to the app online.

I have the following in my css:

 *::selection {background: transparent;} *:focus {outline: none;}

This does happen with all devices I have tested, all be it slightly different outcomes. My S3 seen below is yellow.

However my Nexus 5 is blue.... In my iPhone 3gs it is dark blue/black in my iPhone 4/5 it is also the same colour.

So I would like to remove this state completely or pick my own colours.

Samsung S3 Nexus 5 Nexus 5

you'll find the answer here: http://stackoverflow.com/questions/5210481/disable-orange-outline-highlight-on-focus (I use this in my apps) — Dawson Loudon, Mar 05 '14 at 23:51
Awesome dude, add it as the correct answer and I'll accept it. — Jamie Hutber, Mar 11 '14 at 08:34

score 0 · Answer 1 · edited May 23 '17 at 10:28

0

you'll find the answer here:

Disable orange outline highlight on focus

(I use this in my apps)

-webkit-tap-highlight-color: rgba(255, 255, 255, 0); 
-webkit-tap-highlight-color: transparent;  // i.e. Nexus5/Chrome and Kindle Fire HD 7''

edited May 23 '17 at 10:28

Community

1
1

answered Mar 11 '14 at 14:59

Dawson Loudon

6,029
2
27
31

How to remove active state from mobile webview elements

1 Answers1