Grow your CSS skills. Land your dream job.

Last updated on:

Remove Gray Highlight When Tapping Links in Mobile Safari

-webkit-tap-highlight-color: rgba(0,0,0,0);

And then to allow :active styles to work in your CSS on a page in Mobile Safari:

document.addEventListener("touchstart", function(){}, true);

Comments

  1. It might not be obvious to everyone, but this also works for Android default browsers as well, since they are also Webkit-based.

  2. Permalink to comment#

    works great on object tag, thx !

  3. Mudaser
    Permalink to comment#

    Awesome.!! many many thanks!!

  4. bilelz
    Permalink to comment#

    work great
    thanks

  5. chandra
    Permalink to comment#

    Am still getting green color border in HTC mobiles where as in rest of other android mobiles the hight light color is not appearing

    • Permalink to comment#

      @chandra you should be able to set outline: none in your css to fix this. However this can cause accessibility issues, so make sure you’re putting separate :hover, :focus and :active styles on the element you remove the outline from.

  6. yoshi
    Permalink to comment#

    The declaration document.addEventListener(“touchstart”, function(){}, true); or it’s equivalent creates a rare bug on viewed inside an Iframe on IOS. writing a text in that textarea and than moving the caret to another place in the textArea (for example when wishing to correct the text) blocks the possibility to write.

    To solve this I add the ontouchstart=”” only on the necessary tag and not on the tag.

  7. You should also remember to add the same rule to buttons and form controls as they also have the highlight.

    // Remove tap highlight on iOS
    input,
    textarea,
    button,
    select,
    a {
      -webkit-tap-highlight-color: rgba(0,0,0,0);
    }
    

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".