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:

.target-element {
-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);

I teach web design. I write books on HTML5 games development. I host classes on mobile web and app development. I made animation with Adobe Flash (now Animate).

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.