PhoneGap Tips

Demos: WebKit Tap Highlight Color

Try this example in your iOS or Android web browser, or read more about webkit tap highlight color.

Default webkit tap highlight color

Tap the HTML5 logo!

HTML

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

CSS

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

Without webkit tap highlight color

Tap the HTML5 logo!

HTML

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

CSS

.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);
}