Essential PhoneGap CSS: WebKit Tap Highlight Color

Try the demo!

When you operate a web browser with a traditional mouse and keyboard user interface, you have a mouse cursor hovering over the page to provide feedback about what you will click if you press the mouse button. However, when you operate a web browser with a touchscreen, there is no cursor, and since links are often small bits of text that are completely covered by a finger, you will generally have less accuracy with a touchscreen when tapping a link. In order to help improve accuracy mobile browsers will highlight a tapped link with a transparent gray outline so that the user knows what link is about to be followed.

For example, suppose you have the following link in your HTML:

<a class="html5logo"
  href="javascript:void(0);"></a>

Now let’s style the link with a killer HTML5 logo (by the W3C):

.html5logo {
  display: block;
  width: 128px;
  height: 128px;
  background: url(/img/html5-badge-128.png) no-repeat;
}

This is what the link will look like with the default tap highlight color:

As PhoneGap developers, we have the advantage of being able to proactively design for touchscreens by providing larger buttons and links that are easier to tap, like the large link we just created. So in most cases, we want to remove the default tap highlight color that WebKit adds for us. In fact, when you create a new PhoneGap project using the command line tools, the default tap highlight color will be removed automatically.

Removing the tap highlight color is one of the easiest ways to polish and customize the look and feel of your PhoneGap mobile application. Simply add the -webkit-tap-highlight-color property to your CSS with a completely transparent color:

.html5logo {
  display: block;
  width: 128px;
  height: 128px;
  background: url(/img/html5-badge-128.png) no-repeat;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent; /* For some Androids */
}

Naturally, because this is just CSS, you can globally remove the tap highlight color for your entire application, or selectively remove it with the appropriate selectors. After you remove the tap highlight color you will likely still want to provide some sort of feedback about which element is being tapped. You have considerable flexibility in deciding how to accomplish this, but a good standby for me has been the :active pseudo-class. Here is what our CSS looks like after adding the :active pseudo-class:

.html5logo {
  display: block;
  width: 128px;
  height: 128px;
  background: url(/img/html5-badge-128.png) no-repeat;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent; /* For some Androids */
}
.html5logo:active {
  -webkit-transform: scale3d(0.9, 0.9, 1);
}

When you try this in your iOS or Android web browser, the first thing you’ll notice is that nothing happens! We need to modify our HTML a little bit:

<a class="html5logo"
  href="javascript:void(0);"
  ontouchstart="return true;"></a>

There needs to be an ontouchstart handler on the element, which allows the :active style to be triggered. There are other more elegant ways to handle this particular issue, but that deserves a separate post. Now when you tap the link it will become slightly smaller by using a 3D scale effect, and it will look like this:

We will cover 3D transforms like this in much more gory detail later on because it turns out they are extremely important to the performance of your PhoneGap mobile application!