[WebKit Mobile Development note] How to remove the border from a label on Android

Reprint Address: http://www.cnblogs.com/PeunZhang/archive/2013/02/28/2907708.html

At the end of last year, finish the last project can be happy to go home, but in the testing phase, found a lot of bugs, in order not to affect home time, overtime also to solve these problems, here is a work memory, also is a little summary of the work.

In the ios4+ and android2+ systems, when the finger touches the screen a tag link or button, it produces a different effect, and when the iOS clicks on the element, a translucent gray background appears, and a red border appears for Android. The effect of these 2 systems comes in the sense that the value of this experience is nothing more than to inform the user that the button has been clicked. Unfortunately brings the experience at the same time, also brought a bug ...

A bug that is mostly on Android phone

Using CSS to set the module to Opacity:0, control the module to hide, if the module contains a tag, its a tag on the Android phone is can be triggered, while the iphone is not to be triggered.

The diagram on the left is module one, when the content of the page is not loaded, the module is displayed, and on the right is module two, when the content of the page is fully loaded, the module is displayed, and module two is hidden at the upper level of module one by setting up full transparency.

On Android phones, when the user touches the "view button" while in the module state, the A-label border is displayed, which is obviously not the experience we want.

Finally, after communication with the product manager, for Android phone removal of the button border, then how to remove the Android phone's own button border?

Find the data in search engine-webkit-tap-highlight-color can remove the border, such as:

Exclude misunderstanding

Network data said that this property is only used for iOS (iphone and ipad), in fact, is wrong, Android phone most of the support, but the display is not the same, mobile development is not mature, more need to practice to identify the authenticity of-

-webkit-tap-highlight-color usage

WebKit Kernel Browser, when the user clicks on a link or a clickable element defined by JS, a translucent gray background or red border will appear.

If you want to disable highlighting, you can set the alpha value of the color to 0, which means that the last digit of the property value is set to 0 to remove the background or border.

Remove the CSS code that creates a border when the Android chain touches touch

A,button,input{-webkit-tap-highlight-color:rgba (255,0,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~ 's done.

Generally we set:

* {-webkit-tap-highlight-color:rgba (0,0,0,0);/* 1. Remove the border generated when Android A/button/input tag is clicked 2. Remove the translucent gray background that is generated when the iOS a tag is clicked */}

[WebKit Mobile Development note] How to remove the border (turn) generated by a label on Android