Revision 9329 of -moz-appearance (-webkit-appearance)

  • Revision slug: CSS/-moz-appearance
  • Revision title: -moz-appearance
  • Revision id: 9329
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment 45 words added

Revision Content

{{ CSSMozExtensionRef() }}

Summary

-moz-appearance is used by mozilla browsers to display an element using a platform-native styling based on the operating system's theme.

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

Syntax

-moz-appearance: appearance

Values

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
resizer
scrollbar
scrollbarbutton-down
scrollbarbutton-left
scrollbarbutton-right
scrollbarbutton-up
scrollbartrack-horizontal
scrollbartrack-vertical
separator
statusbar
tab
tab-left-edge
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-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;
}

Notes

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.

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

Revision Source

<p> {{ CSSMozExtensionRef() }}
</p>
<h3 name="Summary"> Summary </h3>
<p><code>-moz-appearance</code> is used by mozilla browsers to display an element using a platform-native styling based on the operating system's theme.
</p>
<ul><li> {{ Xref_cssinitial() }}: {{ Cssxref("none") }}
</li><li> Applies to: all elements
</li><li> {{ Xref_cssinherited() }}: no
</li><li> Percentages: N/A
</li><li> Media: {{ Xref_cssvisual() }} <span class="comment">{{ xref cssinteractive }} {{ xref cssaural }}</span>
</li><li> {{ Xref_csscomputed() }}: as specified
</li></ul>
<h3 name="Syntax"> Syntax </h3>
<pre class="eval">-moz-appearance: <i>appearance</i>
</pre>
<h3 name="Values">Values</h3>
<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 </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 </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") }}<br>
</dt><dt>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.</dt><br>
<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>
<p> </p><h3 name="Examples"> Examples </h3>
<pre>.exampleone {
	-moz-appearance: toolbarbutton;
}
</pre>
<h3 name="Notes"> Notes </h3>
<p>This property is frequently used in <a href="en/XUL">XUL</a> stylesheets to design custom widgets with platform-appropriate styling. It is also used in the <a href="en/XBL">XBL</a> implementations of the widgets that ship with the mozilla platform.
</p>
<div class="noinclude">
</div>
{{ languages( { "fr": "fr/CSS/-moz-appearance", "ja": "ja/CSS/-moz-appearance", "pl": "pl/CSS/-moz-appearance" } ) }}
Revert to this revision