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. User Avatar
    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. User Avatar
    Yop
    Permalink to comment#

    works great on object tag, thx !

  3. User Avatar
    Mudaser
    Permalink to comment#

    Awesome.!! many many thanks!!

  4. User Avatar
    bilelz
    Permalink to comment#

    work great
    thanks

  5. User Avatar
    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

    • User Avatar
      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. User Avatar
    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. User Avatar
    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. User Avatar
    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);
    }
    
  9. User Avatar
    David F. Choy
    Permalink to comment#

    FYI: I didn’t have to add the event listener running on Safari on iPad Air 2, iOS Version 9.2.1

  10. User Avatar
    MD.Riyaz
    Permalink to comment#

    Thanks, it’s work.

  11. User Avatar
    Rui Nunes
    Permalink to comment#

    just use “transparent” as the color

    tap-highlight-color: transparent;
    

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag