Clear the border or mask layer (CSS) that flashes when the a tag is clicked on the mobile website_html/css_WEB-ITnose

On a mobile website, when you click on the text or image tagged with a, a blue border will flash around the element, as is the case with websites on WeChat; and some The browser will flash a semi-transparent mask layer, such as the mobile Chrome browser. In fact, these special effects are just to tell the user that the element has been clicked and improve the user experience. However, sometimes you will feel that these special effects look awkward. I just want to clear it. In fact, it is very simple, just add a CSS.

Clear the special effects that appear when clicking on all a tags: a{ -webkit-tap-highlight-color:rgba(255,0,0,0);}

This is the webkit kernel It is a private attribute of the browser, but it is also effective for websites on WeChat. It is estimated that the browser used by WeChat is also based on the webkit kernel. In fact, most mobile browsers use the webkit kernel, such as UC and Safari.

As a reminder, this CSS can only clear the special effects that appear when the a tag is clicked, but cannot clear the special effects that appear on elements with JS click events added. In fact, these two click special effects are the same, either The element adds a border or a mask. I don’t know yet how to clear the latter’s special effects. I hope someone who knows can leave a message. Thank you.