[Original] [WebKit mobile Development Notes]: how to remove the border generated by tag a on Android

At the end of last year, I was able to go home happily after finishing my last project. But in the test phase, I found many bugs. In order not to affect the home time, I had to solve these problems when I worked overtime, this is a work record, and a small Summary of the work.

In the iso4 + and android2 + systems, when you touch the tag link or button on the screen, different effects will be generated. When you click an element on iOS, a translucent gray background will appear; for Android, a red border is displayed. For the effects of these two systems, the significance of this experience is nothing more than to inform the user that the button has been clicked, and the value is good. It is a pity that the experience is also brought about by bugs ......

This is mainly a bug in Android phones.

Use CSS to Set opacity: 0 to hide the module. If the module contains a tag, its a tag can be triggered on the Android phone, however, it cannot be triggered on the iPhone.

Module 1 is displayed on the left. This module is displayed when the page content is not loaded. Module 2 is displayed on the right. This module is displayed only when the page content is fully loaded, in Module 2, full transparency is set to hide it at the previous level of Module 1.

 

In the Android mobile phone, when the user is in Module 1, the "View button" is touched and the border of tag a is displayed. This is obviously not the experience we want.

After finally communicating with the product manager, how does one remove the button border removed from the Android mobile phone?

You can find the document-WebKit-tap-Highlight-color in the search engine to remove the border, for example:

Eliminate misunderstandings

According to network information, this property is only used for iOS (iPhone and iPad). In fact, it is wrong. Android phones also support it, but the display effect is different. Mobile development is not mature, for more information, we also need to practice to identify authenticity --

-WebKit-tap-Highlight-color usage

In the WebKit kernel browser, a translucent gray background or red border appears when you click a link or click an element defined by Js.

If you want to disable highlight, you can set the Alpha value of the color to 0, that is, the last digit of the attribute value to 0 to remove the background or border.

Removes the CSS code that generates a border when the android link is touched.

A, button, input {-WebKit-tap-Highlight-color: rgba (255, 0, 0);}/* 1. remove the border generated when the android A/button/input tag is clicked. 2. remove the translucent gray background generated when the IOS a tag is clicked */

OK ~ Done