-moz-appearance property | -webkit-appearance property
-moz-appearance: | ||||||
-webkit-appearance: |
Specifies theme rendering mode for an element. Allows you to make an element look like a standard user interface element.
With this property you can reach the user settings in the userChrome.css file, so your application uses the same design settings as the user's browser.
This property is very useful if you develop an application under Firefox, Google Chrome or Safari.
JavaScript page for this property: MozAppearance | webkitAppearance. You can find other example(s) there. |
Possible values:
One of the following values:
Use Macintosh unified toolbar theme for rendering the object. Supported in Firefox from version 3.5. | |||||||
Use the browser's tabbar toolbox theme for rendering the object. | |||||||
Use communications toolbox theme for rendering the object. | |||||||
Use media toolbox theme for rendering the object. | |||||||
Use button theme for rendering the object. | |||||||
Use button bevel theme for rendering the object. | |||||||
Use small button theme for rendering the object. | |||||||
Use caret theme for rendering the object. | |||||||
Use checkbox theme for rendering the object. | |||||||
Use checkbox container theme for rendering the object. | |||||||
Use small checkbox theme for rendering the object. | |||||||
Use dialog theme for rendering the object. | |||||||
Takes the value of this property from the computed style of the parent element. | |||||||
Use listbox theme for rendering the object. | |||||||
Use listitem theme for rendering the object. | |||||||
Use menu theme for rendering the object. | |||||||
Use menulist theme for rendering the object. | |||||||
Use menulist button theme for rendering the object. | |||||||
Use menulist text theme for rendering the object. | |||||||
Use menulist textfield theme for rendering the object. | |||||||
Do not use any widget theme. | |||||||
Use progressbar theme for rendering the object. | |||||||
Use push button theme for rendering the object. | |||||||
Use radio theme for rendering the object. | |||||||
Use radio container theme for rendering the object. | |||||||
Use small radio theme for rendering the object. | |||||||
Use scrollbar theme for rendering the object. | |||||||
Use down scrollbarbutton theme for rendering the object. | |||||||
Use left scrollbarbutton theme for rendering the object. | |||||||
Use right scrollbarbutton theme for rendering the object. | |||||||
Use up scrollbarbutton theme for rendering the object. | |||||||
Use horizontal scrollbargripper theme for rendering the object. | |||||||
Use vertical scrollbargripper theme for rendering the object. | |||||||
Use horizontal scrollbarthumb theme for rendering the object. | |||||||
Use vertical scrollbarthumb theme for rendering the object. | |||||||
Use horizontal scrollbartrack theme for rendering the object. | |||||||
Use vertical scrollbartrack theme for rendering the object. | |||||||
Use searchfield theme for rendering the object. | |||||||
Use the searchfield's cancel button theme for rendering the object. | |||||||
Use the searchfield theme for rendering the object. | |||||||
Use the searchfield's results button theme for rendering the object. | |||||||
Use the searchfield's results decoration theme for rendering the object. | |||||||
Use separator theme for rendering the object. | |||||||
Use horizontal slider theme for rendering the object. | |||||||
Use vertical slider theme for rendering the object. | |||||||
Use horizontal sliderthumb theme for rendering the object. | |||||||
Use vertical sliderthumb theme for rendering the object. | |||||||
Use square button theme for rendering the object. | |||||||
Use statusbar theme for rendering the object. | |||||||
Use tab theme for rendering the object. | |||||||
Use left-edge of tab theme for rendering the object. | |||||||
Use tabpanels theme for rendering the object. | |||||||
Use textarea theme for rendering the object. | |||||||
Use textfield theme for rendering the object. | |||||||
Use toolbar theme for rendering the object. | |||||||
Use toolbarbutton theme for rendering the object. | |||||||
Use toolbox theme for rendering the object. | |||||||
Use tooltip theme for rendering the object. | |||||||
Use treeheadercell theme for rendering the object. | |||||||
Use treeheadersortarrow theme for rendering the object. | |||||||
Use treeitem theme for rendering the object. | |||||||
Use treetwisty theme for rendering the object. | |||||||
Use treetwistyopen theme for rendering the object. | |||||||
Use treeview theme for rendering the object. |
Default: none.
Example HTML code 1:
This example illustrates the use of the -moz-appearance and the -webkit-appearance properties:
|
||||
<head> <style> .example { -moz-appearance: menulist-button; -webkit-appearance: menulist-button; } </style> </head> <body> <button class="example">toolbar like button</button> </body> |
||||
|
||||
Did you find this example helpful?
|
Supported by tags:
a, abbr, acronym, address, b, bdo, big, blink, blockQuote, body, caption, center, cite, code, dd, del, dfn, dir, div, dl, dt, em, fieldSet, font, form, H1, H2, H3, H4, H5, H6, html, i, iframe, ins, isIndex, kbd, label, legend, li, marquee, menu, ol, p, pre, s, samp, small, span, strike, strong, sub, sup, table, td, textArea, th, tt, u, ul, var, applet, button, hr, img, input:button, input:checkbox, input:file, input:image, input:password, input:radio, input:range, input:reset, input:search, input:submit, input:text, object, q, select, tBody, tFoot, tHead, tr, xmp
External links:
-moz-appearance (Mozilla Developer Center)
-webkit-appearance (Safari Reference Library)
appearance (W3C)
-webkit-appearance (Safari Reference Library)
appearance (W3C)
User Contributed Comments