Use CSS3 's Appearance property to change the appearance of an element

Using the "Appearance" property, you can change the browser default style of any element, in a nutshell, you can use the "appearance" property to render "Paragraph P" as a button style, or as an "input box", "marquee" and so on.

Everyone knows that each browser has different rendering of HTML elements, such as "button", which is rendered differently in Chrome and FF. In this way, using the browser's default rendering style for elements, we can use the "appearance" property to change the rendering style of any element, in the simplest case, I want to display the "a" link by default as "button" style, then we can use "appearance Set to button.

"Appearance" function sounds quite large, but unfortunately, the current browser manufacturers are fragmented, still can not achieve a unified standard, so far only two of the kernel browser can be used, one is "WebKit", the other is "FF", that is, in the use of " Appearances ", you need to add each browser factory prefix.

Appearance How to use:

. elmclass{   -webkit-appearance: value;   -moz-appearance:appearance: value;}      

Now let's look at a simple example:

<Pclass="Looklikeabutton" > I was a paragraph P element</P><Pclass= "Looklikealistbox" > I am a paragraph P element </p> <p class= " Looklikealistitem "> I was a paragraph P element </p><p class= "Looklikeasearchfield" > I am a paragraph P element </p><p class= "Looklikeatextarea" > I was 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 to render 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 that renders textarea */.looklikeatextarea-webkit-appearance:TEXTAREA; -moz-appearance:textarea;} /* looks like a drop-down menu, menulist-style rendering */.looklikeamenulist{ span class= "rule" >-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

Checkboxradio  Push-buttonsquare-buttonbuttonbutton-bevellistboxlistitemmenulistmenulist-buttonmenulist-textmenulist-textfieldscrollbarb Utton-upscrollbarbutton-downscrollbarbutton-leftscrollbarbutton-rightscrollbartrack-horizontalscrollbartrack-verticalscro Llbarthumb-horizontalscrollbarthumb-verticalscrollbargripper-horizontalscrollbargripper-verticalslider-horizontalslider-v Erticalsliderthumb-horizontalsliderthumb-verticalcaretsearchfieldsearchfield-decorationsearchfield-results-decorationsear Chfield-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-toolboxtooltiptreeheadercelltreeheadersortarrowtreeitemtreetwistytreetwistyopentreeviewwindow

Original address

Use CSS3 's Appearance property to change the appearance of an element