A detailed description of the mixed attribute usage of some hidden advanced attributes in CSS3

-webkit-user-select and-moz-user-select

Perhaps you often don't want users to select text on your site, whether it's for copyright reasons or not. Usually you will have JS to achieve, another option is to set the value of-webkit-user-select and-moz-user-select to none.

Use this attribute with caution: Because most users are looking for information, they can copy and store it for future use, so this method is useless and ineffective. If you disable the copy-and-paste feature, users can still get the content they want by viewing the source files. I don't understand why this attribute is supported by WebKit and Gecko.

Browser support: WebKit, Gecko.

-webkit-appearance and-moz-appearance

Have you ever thought of disguising a picture as a radio button? Or, does an input box look like a check box? So now appearance has appeared. Even if you don't want a link to always look like a button, here's an example of what you can do if you want to:

Example

   a {-webkit-appearance:button;-moz-appearance:button;}

Browser support: WebKit, Gecko.

Text-align:-moz-center/-webkit-center

This is an attribute (or, to be precise, a "property value"). To center a block-level element, you typically set it to margin:0 Auto. However, you can now also set the Text-align property of the container for the element to-moz-center and-webkit-center. Alternatively, you can either set the-moz-left,-webkit-left, or-moz-right, and-webkit-right the element to the left or right.

Browser support: WebKit, Gecko.

-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).

Outline:none (1) defines this style for the a tag on the PC side in order to cancel the dotted line that appears when you click the a tag in IE. IE7 and the following browsers do not recognize this property, you need to add hidefocus= "true" (2) Input,textarea{outline:none} on the a label the default text box focus style under Chrome (3) does not work on the mobile side, To remove the default style of the text box, you can use-webkit-appearance, which is-webkit-tap-highlight-color when the default style is canceled. 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.