A brief analysis of lesser-known attributes in CSS3:-webkit-tap-highlight-color

The-webkit-tap-highlight-color property in CSS, simply speaking, is the background color setting when the phone is clicked. The following article mainly introduces the CSS3 in this little-known attribute:-webkit-tap-highlight-color related information, the need for friends can refer to the following to see together.

-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