Gray highlight and active state in mobile Safari

Link: “CSS-Tricks: Remove Gray Highlight When Tapping Links in Mobile Safari

This is a simple tricks but very useful if you’re trying to make a button in HTML looks like a real button in touch devices.

Remove the tap highlight:

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

and make the :active state works when user touches that element:

document.addEventListener("touchstart", function(){}, true);


overlaied image when clicked on thumbnail

Makzan | Web design scrapbook | Table of Content