Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

When you click (touch) a link in Safari (or chrome or firefox) for iOS, you get a grey background behind link (only while you're holding it). Is there a way to remove this feature using CSS?

Please see the example image below:

enter image description here

like image 894
sam Avatar asked Aug 09 '12 14:08

sam


1 Answers

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); } 
like image 64
pk-nb Avatar answered Oct 05 '22 23:10

pk-nb