When you are testing your websites on your favorite smartphone, you might find out, that Windows Phone and iOS are including a special behavior when any links on the page are pressed – sort of a highlighting – graying out of the active touched area. This is of course quite helpful sometimes when the bounds of active links on the small screen are hard to discern, but at the same time it can in some cases be quite unfriendly and interfering with your site's design. How can we prevent it? Let's see for both operating systems!

Windows Phone

Windows Phone 8 sadly doesn't offer a way to disable the touch highlight just through CSS and you are required to use a special meta tag to do the job:

<meta name="msapplication-tap-highlight" content="no"/>

Why I wrote Windows Phone 8? Support for this specific meta tag is unfortunately not available on Windows Phone 7 (even with the latest 7.8 bits) and mobile IE 9 simply does not recognize it. Here you will have to make a hard decision. If you can live with touch highlights on Windows Phone 7, you will have a simpler life. However if you really have no other choice and are ready for a challenge, you can include a fairly complicated JavaScript library by Andrew Trice called WinPhone-NoGrayBox. The author has written a great article on this issue along with the link to the library on GitHub.

iOS

Solving the issue is surprisingly simpler on iOS, as we are getting an easy CSS solution here. To globally disable the touch highlighting on iOS, just apply the following style definition in your CSS:

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

This is a webkit specific property that will help you out. You can set the highlight-color to any color you want, but for our case we use a fully transparent black color.