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

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: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 and renders it 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 that renders */.looklikeasearchfield{     -webkit-appearance in Searchfield style: 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

Checkboxradiopush-buttonsquare-buttonbuttonbutton-bevellistboxlistitemmenulistmenulist-buttonmenulist-textmenulist-textfi Eldscrollbarbutton-upscrollbarbutton-downscrollbarbutton-leftscrollbarbutton-rightscrollbartrack-horizontalscrollbartrack -verticalscrollbarthumb-horizontalscrollbarthumb-verticalscrollbargripper-horizontalscrollbargripper-verticalslider-horiz Ontalslider-verticalsliderthumb-horizontalsliderthumb-verticalcaretsearchfieldsearchfield-decorationsearchfield-results-d Ecorationsearchfield-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

If you are interested, you can take a look at the following information:

1. Mozilla Docs for-moz-appearance

2. Trent Walton on Webkit appearance

3. Shaun Inman on disabling Inner text Shadow of the text Inputs on IPad

4. CSS3 Spec

5. CSS Property:-webkit-appearance

Finally, to remind you that now in the IE series and Opera browser does not support "appearance", and Safari is only 3.0 version of the above support, but in Chrome and Firefox and mobile settings browser to get better support. If you are interested in this, you can privately a next try the above attribute value, to give you what effect.

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