CSS3 modify and remove the background box (tap-highlight-color) that appears in the click event of the mobile terminal

Recently, I learned a lot of useful properties of CSS3 when researching mobile pages, and one of them is quite impressive:

-webkit-tap-highlight-color

See http://css-infos.net/property/-webkit-tap-highlight-color

This attribute is used to set the color of the background frame that responds when an element is triggered on a mobile device (such as Adnroid, iOS) when a click event is triggered.

For example, in the Adnroid version of WeChat, when a tag is clicked, a small orange box will appear to indicate the click response.

At this point, if the tap-highlight-color value is set for the element, for example:

-webkit-tap-highlight-color: rgba(240,240,240,0.7);

Then you can change the color of the background frame when the element is clicked.

If the background frame does not need to be displayed, you can set the alpha value in rgba to 0, for example rgba(0,0,0,0)

There is also a method to set the color of the selected text.

Usually the background color when we select text is blue. We can use the following styles to set the style of the selected content of the web page:

::selection             { background:#FFF; color:#333; }

::-moz-selection    { background:#FFF; color:#333; }

::-webkit-selection { background:#FFF; color:#333;}

If you want to remove the selected color, set the background to none.