Apr 13

How to disable tap highlighting on your iPhone/iPad/iWhatever web app

A CSS rule to make the tap highlighting invisible.

In mobile webkit, all links and "tappable" elements (elements with click event listeners) are highlighted when you initiate touch. This gives the user feedback that the element they have touched is indeed active and waiting to be tapped.

If for whatever reason you don't want some elements of your web site or application to be highlighted, simply add the following CSS rule to the corresponding elements.

-webkit-tap-highlight-color: rgba(0,0,0,0); 

I guess this doesn't exactly disable the highlight, but it makes it invisible.

Powered by my hackings on Django-Mingus a Django project, PostgreSQL, memcached, nginx, Apache + mod_wsgi, Ubuntu, Rackspace Cloud,...

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.

html5 | top