Remove gray background from the link clicked in ios safari / chrome / firefox

Question

When you click (tap) a link in Safari (or Chrome or Firefox) for iOS, you get a gray background behind the link (only when you hold it). Is there a way to remove this feature using CSS?

Please see example image below:

Answer 1

Webkit has a specific style property: -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 completely remove the selection -

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

Answer 2

Recent iOS versions for some reason ignore RGBA colors.

To remove it, I had 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