-moz-appearance (-webkit-appearance)

  • Revision slug: CSS/-moz-appearance
  • Revision title: -moz-appearance
  • Revision id: 9341
  • Created:
  • Creator: Kliu0x52
  • Is current revision? No
  • Comment 6 words added

Revision Content

{{ CSSMozExtensionRef() }}

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.

  • {{ Xref_cssinitial() }}: {{ Cssxref("none") }}
  • Applies to: all elements
  • {{ Xref_cssinherited() }}: no
  • Media: {{ Xref_cssvisual() }} {{ xref cssinteractive }} {{ xref cssaural }}
  • {{ Xref_csscomputed() }}: as specified

Syntax

-moz-appearance:  <appearance>

Values

<appearance> is one of the following:

none
No special styling is applied. (Default)
button
The element is drawn like a button.
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-small
dialog
The element is styled like a dialog box, which includes background color and other properties.
listbox
menuitem
The element is styled as menu item, item is highlighted when hovered.
menulist
menulist-button
The element is styled as a button that would indicate a menulist can be opened.
menulist-textfield
The element is styled as the text field for a menulist.
menupopup
progressbar
The element is styled like a progress bar.
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-small {{ obsolete_inline() }}
resizer
scrollbar
scrollbarbutton-down
scrollbarbutton-left
scrollbarbutton-right
scrollbarbutton-up
scrollbartrack-horizontal
scrollbartrack-vertical
separator
statusbar
tab
tab-left-edge {{ obsolete_inline() }}
tabpanels
textfield
toolbar
toolbarbutton
toolbox
-moz-mac-unified-toolbar {{ fx_minversion_inline("3") }}
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.
-moz-win-borderless-glass {{ fx_minversion_inline("4.0") }}
Used for Windows Vista and later. This style applies the Aero Glass effect -- but without a border -- to the element.
-moz-win-browsertabbar-toolbox {{ Fx_minversion_inline("3") }}
Windows Vista and later. This toolbox style is meant to be used for the tab bar in a browser.
-moz-win-communications-toolbox {{ Fx_minversion_inline("3") }}
Windows Vista and later. This toolbox style is meant to be used in communications and productivity applications. Corresponding foreground color is -moz-win-communicationstext.
-moz-win-glass {{ Fx_minversion_inline("3") }}
Windows Vista and later. This style applies the Aero Glass effect to the element.
-moz-win-media-toolbox {{ Fx_minversion_inline("3") }}
Windows Vista and later. This toolbox style is meant to be used in applications that manage media objects. Corresponding foreground color is -moz-win-mediatext.
tooltip
treeheadercell
treeheadersortarrow
treeitem
treetwisty
treetwistyopen
treeview
window

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

{{ languages( { "fr": "fr/CSS/-moz-appearance", "ja": "ja/CSS/-moz-appearance", "pl": "pl/CSS/-moz-appearance" } ) }}

Revision Source

<p>{{ CSSMozExtensionRef() }}</p>
<h3>Summary</h3>
<p>The<code> -moz-appearance </code>CSS property is used in Gecko (Firefox) to display an element using a platform-native styling based on the operating system's theme.</p>
<p>This property is frequently used in <a href="/en/XUL" title="en/XUL">XUL</a> stylesheets to design custom widgets with platform-appropriate styling. It is also used in the <a href="/en/XBL" title="en/XBL">XBL</a> implementations of the widgets that ship with the Mozilla platform.</p>
<ul> <li>{{ Xref_cssinitial() }}: {{ Cssxref("none") }}</li> <li>Applies to: all elements</li> <li>{{ Xref_cssinherited() }}: no</li> <li>Media: {{ Xref_cssvisual() }} <span class="comment">{{ xref cssinteractive }} {{ xref cssaural }}</span></li> <li>{{ Xref_csscomputed() }}: as specified</li>
</ul>
<h3>Syntax</h3>
<pre>-moz-appearance:  &lt;appearance&gt;</pre>
<h3>Values</h3>
<p><code>&lt;appearance&gt; </code>is one of the following:</p>
<dl> <dt>none</dt> <dd>No special styling is applied. (Default)</dd> <dt>button</dt> <dd>The element is drawn like a button.</dd> <dt>checkbox</dt> <dd>The element is drawn like a checkbox, including only the actual "checkbox" portion.</dd> <dt>checkbox-container</dt> <dd>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.</dd> <dt>checkbox-small</dt> <dt>dialog</dt> <dd>The element is styled like a dialog box, which includes background color and other properties.</dd> <dt>listbox</dt> <dt>menuitem</dt> <dd>The element is styled as menu item, item is highlighted when hovered.</dd> <dt>menulist</dt> <dt>menulist-button</dt> <dd>The element is styled as a button that would indicate a menulist can be opened.</dd> <dt>menulist-textfield</dt> <dd>The element is styled as the text field for a menulist.</dd> <dt>menupopup</dt> <dt>progressbar</dt> <dd>The element is styled like a progress bar.</dd> <dt>radio</dt> <dd>The element is drawn like a radio button, including only the actual "radio button" portion.</dd> <dt>radio-container</dt> <dd>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.</dd> <dt>radio-small {{ obsolete_inline() }}</dt> <dt>resizer</dt> <dt>scrollbar</dt> <dt>scrollbarbutton-down</dt> <dt>scrollbarbutton-left</dt> <dt>scrollbarbutton-right</dt> <dt>scrollbarbutton-up</dt> <dt>scrollbartrack-horizontal</dt> <dt>scrollbartrack-vertical</dt> <dt>separator</dt> <dt>statusbar</dt> <dt>tab</dt> <dt>tab-left-edge {{ obsolete_inline() }}</dt> <dt>tabpanels</dt> <dt>textfield</dt> <dt>toolbar</dt> <dt>toolbarbutton</dt> <dt>toolbox</dt> <dt>-moz-mac-unified-toolbar {{ fx_minversion_inline("3") }}</dt> <dd>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.</dd> <dt>-moz-win-borderless-glass {{ fx_minversion_inline("4.0") }}</dt> <dd>Used for Windows Vista and later. This style applies the Aero Glass effect -- but without a border -- to the element.</dd> <dt>-moz-win-browsertabbar-toolbox {{ Fx_minversion_inline("3") }}</dt> <dd>Windows Vista and later. This toolbox style is meant to be used for the tab bar in a browser.</dd> <dt>-moz-win-communications-toolbox {{ Fx_minversion_inline("3") }}</dt> <dd>Windows Vista and later. This toolbox style is meant to be used in communications and productivity applications. Corresponding foreground color is<code> -moz-win-communicationstext</code>.</dd> <dt>-moz-win-glass {{ Fx_minversion_inline("3") }}</dt> <dd>Windows Vista and later. This style applies the Aero Glass effect to the element.</dd> <dt>-moz-win-media-toolbox {{ Fx_minversion_inline("3") }}</dt> <dd>Windows Vista and later. This toolbox style is meant to be used in applications that manage media objects. Corresponding foreground color is<code> -moz-win-mediatext</code>.</dd> <dt>tooltip</dt> <dt>treeheadercell</dt> <dt>treeheadersortarrow</dt> <dt>treeitem</dt> <dt>treetwisty</dt> <dt>treetwistyopen</dt> <dt>treeview</dt> <dt>window</dt>
</dl>
<h3>Examples</h3>
<pre>.exampleone {
	-moz-appearance: toolbarbutton;
}
</pre>
<h3>Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest version</th> <th>Support of</th> </tr> <tr> <td>Internet Explorer</td> <td>---</td> <td>---</td> </tr> <tr> <td>Firefox (Gecko)</td> <td><strong>1.0</strong> (1.0)</td> <td><code>-moz-appearance</code></td> </tr> <tr> <td>Opera (Presto)</td> <td>---</td> <td>---</td> </tr> <tr> <td>Safari | Chrome | WebKit</td> <td>3.0 | 1.0 | 522</td> <td><code>-webkit-appearance</code></td> </tr> </tbody>
</table>
<h3>Specifications</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/css3-ui/#appearance" title="http://www.w3.org/TR/css3-ui/#appearance">CSS 3 Basic User Interface #appearance</a>  Candidate Recommendation 2004-05-11, outdated</li> <li><a class=" external" href="http://dev.w3.org/csswg/css3-ui/#appearance" title="http://dev.w3.org/csswg/css3-ui/#appearance">CSS 3 Basic User Interface #appearance</a>  Editor's draft (work in progress)</li>
</ul>
<p>{{ languages( { "fr": "fr/CSS/-moz-appearance", "ja": "ja/CSS/-moz-appearance", "pl": "pl/CSS/-moz-appearance" } ) }}</p>
Revert to this revision