How to change the appearance of an element using the Appearance property in CSS3

This article mainly describes how to use the Appearance attribute in the CSS3 to change the appearance of elements, has a certain reference value, now share to everyone, the need for friends can refer to

Everyone knows that each browser has different rendering of HTML elements, such as button, which is rendered differently in Chrome and FF. This way, we can use the Appearance property to change the rendering style of any element using the browser's default rendering style for elements.

The use of "-webkit-appearance:none" was described in the previous period in the bug "fix iphone on submit button". "To change the default style of the button under the iphone, in fact we can reverse the idea, using the" appearance "property, to change any element of the browser default style, simply say, you can use the" appearance "property to render" Paragraph P "as a button style, You can also render effects such as "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:    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 am a paragraph P element </p>  <p class= "Looklikeasearchfield" > I am 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

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.

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!