Mobile page default style reset

1. -webkit-tap-highlight-color ( this property is only used for IOS (iphone and ipad) )

    When you click on a link or a clickable element defined by js, it will appear with a semi-transparent gray background. To reset this behavior, you can set -webkit-tap-highlight-color to any color.

    eg, set the highlight color to 50% transparent red       

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

2、outline:none

    The property value is set to:

    a. Cancel the default text box focus style under the webkit kernel browser (input, textarea { outline: none; });

    b. Define this style for the a tag on the pc side to cancel the dotted line that appears when the a tag is clicked under the IE browser. IE7 and below versions do not recognize this attribute, and you need to add hidefocus="true" to the a tag;

 3、-webkit-appearcance:none

     Eliminate the default styles of input boxes and buttons, and add this attribute to IOS to customize styles for buttons and input boxes. Different types of input use this attribute to behave differently. Text and button have no style, and radio and checkbox disappear directly.

4、user-select:none

    The selection of page text is prohibited. This property is not inherited. Generally, the text added to the body stipulates that the text of the entire body will not be automatically adjusted.  

    -webkit-user-select: none;   ( Chrome/safari )

    -ms-user-select: none;  ( fireFox )

     IE6-9 does not support this attribute, but supports the use of the tag attribute onselectstart="return false" to achieve the effect of user-select: none;

    Until opera12.5 does not support this attribute, support the private label attribute userselectable="on" to achieve the effect of user-select: none;

 5、text-size-adjust: none / 100%

    -ms-text-size-adjust: 100%;

    -webkit-text-size-adjust: 100%;

    It is forbidden to automatically resize the text (by default, the text size will change when the device is rotated). This property is also not inherited. Generally, it is added to the body, which stipulates that the text of the entire body will not be automatically adjusted  .

6、-webkit-touch-callout: none

    Prohibit long press page is a popup menu

7、-webkit-overflow-scrolling: touch

    Partial scrolling (only supported on IOS5.0 and above)

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=324729567&siteId=291194637