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

Source: Internet
Author: User
Tags dashed line
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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.