Yellow outline for link/tab/button on android :(

ionic-v1
1

Does any have this issue too?
Every clickable link has this outline when touching it.
I have tried

* {
-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;
}

but the yellow outlines are still there.

any help pls?

2

Can you create code-pen ??

3

I downloaded habitRPG https://play.google.com/store/apps/details?id=com.ocdevel.habitrpg
Found it has the same issue…
Every button has a yellow border when clicking.

4

it’s only on android right?

and do you mean the blue line in your picture?
if so its common design for android. see here:

5

Not the blue line,
it’s the orange outline pointed by the arrow.

6

can you try

-webkit-tap-highlight-color: transparent;

or

* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);  
}

which android version are you using?

If * does not work try it with a Id or a class
like add id="App" to your body and do this:

#App {
-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;
}
7

Thank you, but is not working. I added App id to body, still have the orange outline.
Android version is 4.2.2