81

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

Farhan Haque
  • 991
  • 1
  • 9
  • 21
sam
  • 9,486
  • 36
  • 109
  • 160
  • I have not really an idea about safari iOS, but when you are talking about links and css, then I guess you best change the background-color in a:active – Sven Bieder Aug 09 '12 at 14:05

2 Answers2

204

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);
}
pk-nb
  • 2,850
  • 1
  • 18
  • 20
18

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

Peter Browse
  • 201
  • 2
  • 6