remove grey background on link clicked in ios safari / chrome / firefox remove grey background on link clicked in ios safari / chrome / firefox ios ios

remove grey background on link clicked in ios safari / chrome / firefox


Webkit has a specific style property for that: -webkit-tap-highlight-color.

Copied from: http://davidwalsh.name/mobile-highlight-color

/* light blue at 80% opacity */html {    -webkit-tap-highlight-color: rgba(201, 224, 253, 0.8);}/* change it for a div that has a similar background-color to the light blue tap color */.blueDiv {    -webkit-tap-highlight-color: rgba(251, 185, 250, 0.9);}

If you want to remove the highlight completely—

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


Latest versions of iOS are ignoring RGBA colors for some reason.

To remove it, I ended up having to use the following:

-webkit-tap-highlight-color: transparent;

As documented here:https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color