How to reset the default style of the mobile page? What are the methods

How to reset the default style of the mobile page? I believe that many friends who have just come into contact with mobile pages will have such questions. This chapter will introduce to you how to reset the default style of the mobile page? What are the methods. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1, -webkit-tap-highlight-color

-webkit-tap-highlight-color:rgba(0,0,0,0); //Set transparency to 0 and remove it The default gray translucent overlay (iOS) or virtual box (Android) when link and text box objects are clicked.

-webkit-tap-highlight-color:rgba(255,0,0,0.5); //Use this attribute to set the highlight of the link area to 50% transparent red when touching, only on ios kick in. As long as this attribute is used on Android, it will appear as a border. Add this attribute to the body to ensure that the click area of ​​the body has the same effect.

2.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 the a tag is clicked on the IE browser. Browsers ie7 and below do not yet recognize this attribute. You need to add hidefocus="true"

(2) input, textarea{outline:none} to cancel the default text box focus style under chrome

(3) It does not work on the mobile terminal. If you want to remove the default style of the text box, you can use -webkit-appearance. To cancel the default style when focusing, use -webkit-tap-highlight-color. I saw some mobile reset files adding this attribute, but it is actually redundant.

3.-webkit-appearance

-webkit-appearance: none;//Eliminate the native appearance of the input box and button. Only by adding this attribute on iOS can the button and input box be customized. Define style

Different types of input behave differently after using this attribute. Text and button have no style, radio and checkbox disappear directly

4.-webkit-user-select

-webkit-user-select: none; // Disable page text selection, this attribute does not Inheritance, generally added to the body, stipulates that the text of the entire body will not be automatically adjusted

5.-webkit-text-size-adjust

-webkit-text-size-adjust: none; //Disable automatic resizing of text (by default, the text size will change when the device is rotated). This attribute is not inherited. Generally, it is added to the body to stipulate that the text of the entire body will not be automatically adjusted.

6 .-webkit-touch-callout

-webkit-touch-callout:none; // Disable the pop-up menu when long pressing the page (valid under iOS), add

HTML video tutorial, please pay attention to the PHP Chinese website.

The above is the detailed content of How to reset the default style of the mobile page? What are the methods. For more information, please follow other related articles on the PHP Chinese website!