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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .target-element { | |
| -webkit-tap-highlight-color: rgba(0,0,0,0); | |
| } |
and make the :active state works when user touches that element:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| document.addEventListener("touchstart", function(){}, true); |
