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

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:

enter image description here

+65
css safari ios mobile-safari mobile-chrome
Aug 09 '12 at 14:00
source share
2 answers

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); } 
+162
Aug 09 2018-12-12T00:
source share
— -

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

+3
Aug 27 '19 at 17:35
source share



All Articles