Treehouse: 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. Ryan McLaughlin
    Permalink to comment#

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

  2. Yop
    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

    • Damian
      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. Craig Dennis
    Permalink to comment#

    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);
    }
    
  8. Maarten
    Permalink to comment#

    Also don’t forget to add labels for checkboxes :)

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

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```