Detailed explanation of the usage of mixed attributes 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 website, whether for copyright reasons or not. Usually everyone has js to implement it. Another solution is to set the values ​​of -webkit-user-select and -moz-user-select to none.

Please use this attribute with caution: since most users are here to view information they can copy and store for future use, this approach is neither useful nor effective. If you disable copy-paste, users can still get what they want by viewing the source file. 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 wanted to disguise an image as a radio button? Or, an input box that looks like a checkbox? So now appearance appears. Even if you don't want a link to always look like a button, here's an example to show you how you can do it if you want:

Example

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

View Device support: WebKit, Gecko.

text-align: -moz-center/-webkit-center

This is the existence of an attribute (or to be precise, an "attribute value") Very surprising. To center a block-level element, we usually set it to margin:0 auto. However, now you can also set the text-align property of the element's container to -moz-center and -webkit-center. Correspondingly, you can also set the element to the left or right by setting -moz-left, -webkit-left or -moz-right, -webkit-right.

Browser support: WebKit, Gecko.

-webkit-tap-highlight-color

This attribute is only used for iOS (iPhone and iPad). When you click on a link or clickable element defined through Javascript, it will appear with a semi-transparent gray background. To reset this behavior, you can set -webkit-tap-highlight-color to any color.

To disable this highlighting, set the color’s alpha value to 0.

Example: Set the highlight color to 50% transparent red:

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

Browser support: iOS only (iPhone and iPad).

outline: none (1) The purpose of defining this style for the a tag on the PC side is to cancel the dotted line that appears when clicking the a tag under the IE browser. IE7 and below browsers do not yet recognize this attribute. You need to add hidefocus="true"(2)input on the a tag, textarea{outline:none} to cancel the default text box focus style under chrome. (3) is not available on the mobile terminal. It works. If you want to remove the default style of the text box, you can use -webkit-appearance. To cancel the default style when focusing, -webkit-tap-highlight-color. I saw some mobile reset files adding this attribute, but it is actually redundant.

webkit-appearance -webkit-appearance: none; //Eliminate the native appearance of the input box and button. Only by adding this attribute on iOS can you customize the style of the button and input box. Note: Different types of input behave differently after using this attribute. Text and buttons have no styles, and radio and checkbox disappear directly.

The above is the detailed content of Detailed explanation of the usage of mixed attributes of some hidden advanced attributes in css3. For more information, please follow other related articles on the PHP Chinese website!