Change Mobile Safari Highlight Color with CSS

Written by David Walsh on September 26, 2011 · 6 Comments

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.

Comments

  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
    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?

  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. Lovely!! I have been struggling with this issue to get rid of the highlight….This worked!!

Be Heard

Tip: Wrap your code in <pre> tags or link to a GitHub Gist!

Use Code Editor
Older
Elegant Overflow with CSS Ellipsis
Newer
Dojo, Dijit, Dropdowns, and _aroundNode