How the Webkit-tap-highlight-color property of CSS3 is used

This time to everyone to bring CSS3 Webkit-tap-highlight-color attribute how to use, the use of CSS3 webkit-tap-highlight-color attention to what, the following is the actual case, together to see.

-webkit-tap-highlight-color

This property is only available for iOS (iphone and ipad). When you click on a link or a clickable element defined by JavaScript, it will appear with a translucent gray background. To reset this performance, you can set-webkit-tap-highlight-color to any color.
To disable this highlight, set the color's alpha value to 0.

Example: Set a high-light color to 50% transparent red:

-webkit-tap-highlight-color:rgba (255,0,0,0.5);

Browser support: Only iOS (iphone and ipad).

CSS3 in-webkit-text-size-adjust detailed

1, when the style table font-size<12px, the Chinese version of the Chrome browser font display is still 12px, then you can use Html{-webkit-text-size-adjust:none;}

2,-webkit-text-size-adjust placed on the body will cause page scaling failure

3. Body will inherit the style defined in HTML

4. Do not use-webkit-text-size-adjust to define inheritable or global

Outline:none

(1) The purpose of defining this style on the PC side for a tag is to cancel the dashed line that appears when you click the a tag in IE. IE7 and the following browsers do not recognize this property and need to add hidefocus= "true" on the A label

(2) Input,textarea{outline:none} uncheck the default text box focus style under chrome

(3) on the mobile side is not working, want to remove the text box default style can use-webkit-appearance, focus when the default style of cancellation is-webkit-tap-highlight-color.

It is superfluous to see some of the mobile reset files added with this attribute.

Webkit-appearance

-webkit-appearance:none;   Eliminate the native appearance of the input boxes and buttons, and add this property on iOS to customize the style for the buttons and input boxes.

Note: input of different type uses this attribute to behave differently. Text, button no style, radio, checkbox disappears directly

-webkit-user-select

-webkit-user-select:none; Prohibit page text selection, this property does not inherit, generally added to the body of the text will not automatically adjust the body

-webkit-touch-callout

-webkit-touch-callout:none;  Disable the pop-up menu (active under iOS) when long press the page, and the IMG and a tags are

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

Four ways to hide in html+css
Common use of CSS and HTML errors

Border-image usage in CSS styles