-moz-appearance (-webkit-appearance)

  • Revision slug: CSS/-moz-appearance
  • Revision title: -moz-appearance
  • Revision id: 9309
  • Created:
  • Creator: Readams
  • Is current revision? No
  • Comment /* See Also */

Revision Content

{{template.CSSRef()}}

Summary

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

  • Initial value: none
  • Applies to: all elements
  • Inherited: no
  • Percentages: N/A
  • Computed value: as specified

Syntax

-moz-appearance: appearance value

Values

none
No special styling is applied. (Default)
button
The element is drawn like a button
button-small
The element is drawn like a small 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
menu
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
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
scrollbar
scrollbarbutton-down
scrollbarbutton-left
scrollbarbutton-right
scrollbarbutton-up
scrollbartrack-horizontal
scrollbartrack-vertical
separator
statusbar
tab
tab-left-edge
tabpanels
textfield
toolbar
toolbarbutton
toolbarbutton
toolbox
tooltip
treeheadercell
treeheadersortarrow
treeitem
treetwisty
treetwistyopen
treeview

Examples

.exampleone {
	-moz-appearance: toolbarbutton;
}

See Also

CSS_Reference:Mozilla_Extensions

Revision Source

<p> 
{{template.CSSRef()}}
</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> Initial value: none
</li><li> Applies to: all elements
</li><li> Inherited: no
</li><li> Percentages: N/A
</li><li> Computed value: as specified
</li></ul>
<h3 name="Syntax"> Syntax </h3>
<pre class="eval">-moz-appearance: <i>appearance value</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> button-small</dt><dd> The element is drawn like a small 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> menu
</dt><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> 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> 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> toolbarbutton
</dt><dt> toolbox
</dt><dt> tooltip
</dt><dt> treeheadercell
</dt><dt> treeheadersortarrow
</dt><dt> treeitem
</dt><dt> treetwisty
</dt><dt> treetwistyopen
</dt><dt> treeview
</dt></dl>
<h3 name="Examples"> Examples </h3>
<pre>.exampleone {
	-moz-appearance: toolbarbutton;
}
</pre>
<h3 name="See_Also"> See Also </h3>
<p><a href="en/CSS_Reference/Mozilla_Extensions">CSS_Reference:Mozilla_Extensions</a>
</p>
Revert to this revision