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.

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

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