Change Mobile Safari Highlight Color with CSS

By  on  

I love the amount of extra customization afforded to us by WebKit. That also makes me love the fact that, for the most part, WebKit Mobile is the choice renderer used by mobile devices. One rarely used style property is -webkit-tap-highlight-color, which allows developers to change the default tap highlight color. Here's how to use it!


/* 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);

Changing the -webkit-tap-highlight-color property value is the key! Also note that using RGBA color allows the extra dimension opacity for the highlight so that the color isn't so harsh.

In the case that you have an element which you'd prefer wasn't highlighted at all, you would code:

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

-webkit-tap-highlight-color obviously isn't a crucial property to change with each site but it's nice to have the ability to change the tap color, especially if you're using dark-colored backgrounds.

Recent Features

  • By
    Page Visibility API

    One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else? When do they come back?

  • By
    Convert XML to JSON with JavaScript

    If you follow me on Twitter, you know that I've been working on a super top secret mobile application using Appcelerator Titanium.  The experience has been great:  using JavaScript to create easy to write, easy to test, native mobile apps has been fun.  My...

Incredible Demos

  • By
    Create a Dojo Lightbox with dojox.image.Lightbox

    One of the reasons I love the Dojo Toolkit is that it seems to have everything.  No scouring for a plugin from this site and then another plugin from that site to build my application.  Buried within the expansive dojox namespace of Dojo is

  • By
    MooTools-Like Element Creation in jQuery

    I really dislike jQuery's element creation syntax. It's basically the same as typing out HTML but within a JavaScript string...ugly! Luckily Basil Goldman has created a jQuery plugin that allows you to create elements using MooTools-like syntax. Standard jQuery Element Creation Looks exactly like writing out...


  1. Thanks, David. However I don’t see the change in my experiment on my iPhone and using

    html {
      -webkit-tap-highlight-color: rgba(27, 75, 69, 1);

    and inline version such as style=" -webkit-tap-highlight-color: rgba(27, 75, 69, 1);"

  2. Any idea how to disable this blink/highlight effect in Firefox OS app?

    • Try setting it to transparent?!

    • Yes I tried that on both body and anchor tags but it’s not working in Firefox OS simulator :(

  3. Can you tell me how to put a picture when highlighting?
    Can this be done using CSS3? or do i need to add js for when this is touched add a background pic?

  4. Shalabh

    Lovely!! I have been struggling with this issue to get rid of the highlight….This worked!!

  5. Aroos
    a:link { -webkit-tap-highlight-color: transparent; }

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!