-webkit-appearance change the browser default style for any element

Some time ago, the company has an emergency conference, need to be on the mobile side to do an invitation letter page. But when you implement the drop-down box, the effects of iOS and Android are always different. After my search, I found-webkit-appearance this style attribute by accident. Later studied carefully, and now share with you.

Let's start by introducing this property:

Appearance: To change the browser default style of any element, simply say, you can use the "appearance" property to render "Paragraph P" as a button style, or as an "input box", "marquee" and other effects. How do you feel when you see the light?

Next look at the usage:

. Test {   -webkit-appearance: value;    -moz-appearance:    value ;   Appearance:         value;}

Now let's look at a simple example:

<p class= "Looklikeabutton" > I am a paragraph P element </p><p class= "Looklikealistbox" > I am a paragraph P element </p><p class= "Looklikealistitem" > I was a paragraph P element </p><p class= "Looklikeasearchfield" > I was a paragraph P element </p><p class= "Looklikeatextarea" > I am a paragraph P element </p><p class= "Looklikeamenulist" > I am a paragraph P element </p>

Next, use the "appearance" property to change the style of the "P" element above:

/*looks like a button that renders in a button style*/. Looklikeabutton{-webkit-appearance:Button;-moz-appearance:Button;}/*looks like a list box, rendered in a ListBox style*/. Looklikealistbox{-webkit-appearance:ListBox;-moz-appearance:ListBox;}/*looks like a list of listings, rendered in ListItem style*/. Looklikealistitem{-webkit-appearance:ListItem;-moz-appearance:ListItem;}/*looks like a search box, rendered in Searchfield style*/. Looklikeasearchfield{-webkit-appearance:Searchfield;-moz-appearance:Searchfield;}/*looks like a text field, rendered in textarea style*/. Looklikeatextarea{-webkit-appearance:textarea;-moz-appearance:textarea;}/*looks like a drop-down menu, rendered in menulist style*/. Looklikeamenulist{-webkit-appearance:menulist;-moz-appearance:menulist;}

After setting the property value of "appearance", the default style of paragraph p is changed:

Of course, the above attribute is only part of "appearance", I collected a bit of WebKit and Mozilla under the appearance for everyone to refer to:

Appearance property value under WebKit

Heckboxradiopush-buttonsquare-buttonbuttonbutton-bevellistboxlistitemmenulistmenulist-buttonmenulist-textmenulist-textfie ldscrollbarbutton-upscrollbarbutton-downscrollbarbutton-leftscrollbarbutton-rightscrollbartrack-horizontalscrollbartrack- Verticalscrollbarthumb-horizontalscrollbarthumb-verticalscrollbargripper-horizontalscrollbargripper-verticalslider-horizo Ntalslider-verticalsliderthumb-horizontalsliderthumb-verticalcaretsearchfieldsearchfield-decorationsearchfield-results-de Corationsearchfield-results-buttonsearchfield-cancel-buttontextfieldtextarea

Appearance property value under Mozilla

Nonebuttoncheckboxcheckbox-containercheckbox-smalldialoglistboxmenuitemmenulistmenulist-buttonmenulist-textfieldmenupopup Progressbarradioradio-containerradio-smallresizerscrollbarscrollbarbutton-downscrollbarbutton-leftscrollbarbutton-rightsc Rollbarbutton-upscrollbartrack-horizontalscrollbartrack-verticalseparatorstatusbartabtab-left-edge Obsoletetabpanelstextfieldtextfield-multilinetoolbartoolbarbuttontoolbox-moz-mac-unified-toolbar-moz-win-borderless-glass -moz-win-browsertabbar-toolbox-moz-win-communications-toolbox-moz-win-glass-moz-win-media-toolboxtooltiptreeheadercelltre Eheadersortarrowtreeitemtreetwistytreetwistyopentreeviewwindow

Disclaimer: This article mainly refer to http://www.w3cplus.com/css3/changing-appearance-of-element-with-css3.html

-webkit-appearance change the browser default style for any element