Treehouse

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.

ydkjs-2.png

Recent Features

  • LightFace:  Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...

  • 5 More HTML5 APIs You Didnât Know Existed

    The HTML5 revolution has provided us some awesome JavaScript and HTML APIs.  Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers.  Regardless of API strength or purpose, anything to help us better do our job is a...

Incredible Demos

  • Facebook-Style Modal Box Using MooTools

    In my oh-so-humble opinion, Facebook's Modal box is the best modal box around. It's lightweight, subtle, and very stylish. I've taken Facebook's imagery and CSS and combined it with MooTools' awesome functionality to duplicate the effect. The Imagery Facebook uses a funky sprite for their modal...

  • HTML5 Datalist

    One of the most used JavaScript widgets over the past decade has been the text box autocomplete widget.  Every JavaScript framework has their own autocomplete widget and many of them have become quite advanced.  Much like the placeholder attribute's introduction to markup, a frequently used...

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

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