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!

The CSS

/* 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
    Create a CSS Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube tutorial I've read is a bit...

  • By
    An Interview with Eric Meyer

    Your early CSS books were instrumental in pushing my love for front end technologies. What was it about CSS that you fell in love with and drove you to write about it? At first blush, it was the simplicity of it as compared to the table-and-spacer...

Incredible Demos

  • By
    MooTools PulseFade Plugin

    I was recently driven to create a MooTools plugin that would take an element and fade it to a min from a max for a given number of times. Here's the result of my Moo-foolery. The MooTools JavaScript Options of the class include: min: (defaults to .5) the...

  • By
    PHP Woot Checker – Tech, Wine, and Shirt Woot

    If you haven't heard of Woot.com, you've been living under a rock. For those who have been under the proverbial rock, here's the plot: Every day, Woot sells one product. Once the item is sold out, no more items are available for purchase. You don't know how many...

Discussion

  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!