-moz-appearance

Table of contents

  1. 1. Summary
  2. 2. Syntax
  3. 3. Values
  4. 4. Examples
  5. 5. Browser compatibility
  6. 6. Specifications
Page Notifications Off

« CSS « CSS Reference « CSS Reference:Mozilla Extensions

Summary

The -moz-appearance CSS property is used in Gecko (Firefox) to display an element using a platform-native styling based on the operating system's theme.

This property is frequently used in XUL stylesheets to design custom widgets with platform-appropriate styling. It is also used in the XBL implementations of the widgets that ship with the Mozilla platform.

Syntax

-moz-appearance:  <appearance>

Values

<appearance> is one of the following:

Value Demo Description
none
-
 No special styling is applied. (Default)
button
-
 The element is drawn like a button.
button-arrow-down
-
  
button-arrow-next
-
  
button-arrow-previous
-
  
button-arrow-up
-
  
button-bevel
-
  
button-focus
-
  
caret
-
  
checkbox
-
 The element is drawn like a checkbox, including only the actual "checkbox" portion.
checkbox-container
-
 The element is drawn like a container for a checkbox, which may include a prelighting background effect under certain platforms. Normally a would contain a label and a checkbox.
checkbox-label
-
  
checkmenuitem
-
  
dualbutton
-
  
groupbox
-
  
listbox
-
  
listitem
-
  
menuarrow
-
  
menubar
-
  
menucheckbox
-
  
menuimage
-
  
menuitem
-
 The element is styled as menu item, item is highlighted when hovered.
menuitemtext
-
  
menulist
-
  
menulist-button
-
 The element is styled as a button that would indicate a menulist can be opened.
menulist-text
-
  
menulist-textfield
-
 The element is styled as the text field for a menulist. (Not implemented for the Windows platform)
menupopup
-
  
menuradio
-
  
menuseparator
-
  
progressbar
-
 The element is styled like a progress bar.
progressbar-vertical
-
  
progresschunk
-
  
progresschunk-vertical
-
  
radio
-
 The element is drawn like a radio button, including only the actual "radio button" portion.
radio-container
-
 The element is drawn like a container for a radio button, which may include a prelighting background effect under certain platforms. Normally would contain a label and a radio button.
radio-label
-
  
radiomenuitem
-
  
resizer
-
  
resizerpanel
-
  
scale-horizontal
-
  
scalethumbend
-
  
scalethumb-horizontal
-
  
scalethumbstart
-
  
scalethumbtick
-
  
scalethumb-vertical
-
  
scale-vertical
-
  
scrollbarbutton-down
-
  
scrollbarbutton-left
-
  
scrollbarbutton-right
-
  
scrollbarbutton-up
-
  
scrollbarthumb-horizontal
-
  
scrollbarthumb-vertical
-
  
scrollbartrack-horizontal
-
  
scrollbartrack-vertical
-
  
searchfield
-
  
separator
-
  
sheet
-
  
spinner
-
  
spinner-downbutton
-
  
spinner-textfield
-
  
spinner-upbutton
-
  
splitter
-
  
statusbar
-
  
statusbarpanel
-
  
tab
-
  
tabpanel
-
  
tabpanels
-
  
tab-scroll-arrow-back
-
  
tab-scroll-arrow-forward
-
  
textfield
-
  
textfield-multiline
-
  
toolbar
-
  
toolbarbutton
-
  
toolbarbutton-dropdown
-
  
toolbargripper
-
  
toolbox
-
  
tooltip
-
  
treeheader
-
  
treeheadercell
-
  
treeheadersortarrow
-
  
treeitem
-
  
treeline
-
  
treetwisty
-
  
treetwistyopen
-
  
treeview
-
  
-moz-mac-unified-toolbar
-
 Mac OS X only. This causes the toolbar and title bar to render using the unified toolbar style common to Mac OS X 10.4 and later applications.
Requires Gecko 2.0 -moz-win-borderless-glass
-
 Windows Vista and later only. This style applies the Aero Glass effect -- but without a border -- to the element.
-moz-win-browsertabbar-toolbox
-
 Windows Vista and later only. This toolbox style is meant to be used for the tab bar in a browser.
-moz-win-communicationstext
-
  
-moz-win-communications-toolbox
-
 Windows Vista and later only. This toolbox style is meant to be used in communications and productivity applications. Corresponding foreground color is -moz-win-communicationstext.
Requires Gecko 6.0 -moz-win-exclude-glass
-
 Windows Vista and later only. This styles is used to exclude the Aero Glass effect on the element.
-moz-win-glass
-
 Windows Vista and later only. This style applies the Aero Glass effect to the element.
-moz-win-mediatext
-
  
-moz-win-media-toolbox
-
 Windows Vista and later only. This toolbox style is meant to be used in applications that manage media objects. Corresponding foreground color is -moz-win-mediatext.
-moz-window-button-box
-
  
-moz-window-button-box-maximized
-
  
-moz-window-button-close
-
  
-moz-window-button-maximize
-
  
-moz-window-button-minimize
-
  
-moz-window-button-restore
-
  
-moz-window-frame-bottom
-
  
-moz-window-frame-left
-
  
-moz-window-frame-right
-
  
-moz-window-titlebar
-
  
-moz-window-titlebar-maximized
-
  

Examples

.exampleone {
	-moz-appearance: toolbarbutton;
}

Browser compatibility

Browser Lowest version Support of
Internet Explorer --- ---
Firefox (Gecko) 1.0 (1.0) -moz-appearance
Opera (Presto) --- ---
Safari | Chrome | WebKit 3.0 | 1.0 | 522 -webkit-appearance

Specifications

The appearance property is currently not present in any newer CSS specification.

Tags (4)

Edit tags

Attachments (0)

 

Attach file