-moz-appearance (-webkit-appearance)

  • Revision slug: Web/CSS/-moz-appearance
  • Revision title: -moz-appearance (-webkit-appearance)
  • Revision id: 461665
  • Created:
  • Creator: mikeiz404
  • Is current revision? Yes
  • Comment Grammar.

Revision Content

{{Not_standard()}}{{ 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.

Do not use this property on Web sites: not only is it non-standard, but its behavior changes from one browser to another. Even the keyword none does not have the same behavior on each form element across different browsers, and some do not support it at all.

  • {{ Xref_cssinitial() }} {{ Cssxref("none") }} (but this value is overriden in the user agent css)
  • Applies t 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:

Value Demo Description
none {{EmbedLiveSample("sampleNone",100,50)}} No special styling is applied. This is the default. Note, however, {{ bug(649849) }} and {{ bug(605985) }}.
button {{EmbedLiveSample("sampleButton",100,50)}} The element is drawn like a button.
button-arrow-down {{EmbedLiveSample("sampleButtonArrowDown",100,50)}}  
button-arrow-next {{EmbedLiveSample("sampleButtonArrowNext",100,50)}}  
button-arrow-previous {{EmbedLiveSample("sampleButtonArrowPrevious",100,50)}}  
button-arrow-up {{EmbedLiveSample("sampleButtonArrowUp",100,50)}}  
button-bevel {{EmbedLiveSample("sampleButtonBevel",100,50)}}  
button-focus {{EmbedLiveSample("sampleButtonFocus",100,50)}}  
caret {{EmbedLiveSample("sampleCaret",100,50)}}  
checkbox {{EmbedLiveSample("sampleCheckbox",100,50)}} The element is drawn like a checkbox, including only the actual "checkbox" portion.
checkbox-container {{EmbedLiveSample("sampleCheckboxContainer",100,50)}} 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 {{EmbedLiveSample("sampleCheckboxLabel",100,50)}}  
checkmenuitem {{EmbedLiveSample("sampleCheckmenuitem",100,50)}}  
dualbutton {{EmbedLiveSample("sampleDualButton",100,50)}}  
groupbox {{EmbedLiveSample("sampleGroupbox",100,50)}}  
listbox {{EmbedLiveSample("sampleListBox",100,50)}}  
listitem {{EmbedLiveSample("sampleListitem",100,50)}}  
menuarrow {{EmbedLiveSample("sampleMenuArrow",100,50)}}  
menubar {{EmbedLiveSample("sampleMenubar",100,50)}}  
menucheckbox {{EmbedLiveSample("sampleMenuCheckbox",100,50)}}  
menuimage {{EmbedLiveSample("sampleMenuImage",100,50)}}  
menuitem {{EmbedLiveSample("sampleMenuItem",100,50)}} The element is styled as menu item, item is highlighted when hovered.
menuitemtext {{EmbedLiveSample("sampleMenuItemText",100,50)}}  
menulist {{EmbedLiveSample("sampleMenuList",100,50)}}  
menulist-button {{EmbedLiveSample("sampleMenuListButton",100,50)}} The element is styled as a button that would indicate a menulist can be opened.
menulist-text {{EmbedLiveSample("sampleMenuListText",100,50)}}  
menulist-textfield {{EmbedLiveSample("sampleMenuListTextfield",100,50)}} The element is styled as the text field for a menulist. (Not implemented for the Windows platform)
menupopup {{EmbedLiveSample("sampleMenuPopup",100,50)}}  
menuradio {{EmbedLiveSample("sampleMenuRadio",100,50)}}  
menuseparator {{EmbedLiveSample("sampleMenuSeparator",100,50)}}  
meterbar {{EmbedLiveSample("sampleMeterbar",100,50)}} New in Fx 16.
meterchunk {{EmbedLiveSample("sampleMeterchunk",100,50)}} New in Fx 16
progressbar {{EmbedLiveSample("sampleMenuProgressBar",100,50)}} The element is styled like a progress bar.
progressbar-vertical {{EmbedLiveSample("sampleProgressBarVertical",100,50)}}  
progresschunk {{EmbedLiveSample("sampleProgressChunk",100,50)}}  
progresschunk-vertical {{EmbedLiveSample("sampleProgressChunkVertical",100,50)}}  
radio {{EmbedLiveSample("sampleRadio",100,50)}} The element is drawn like a radio button, including only the actual "radio button" portion.
radio-container {{EmbedLiveSample("sampleRadioContainer",100,50)}} 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 {{EmbedLiveSample("sampleRadioLabel",100,50)}}  
radiomenuitem {{EmbedLiveSample("sampleRadioMenuItem",100,50)}}  
resizer {{EmbedLiveSample("sampleResizer",100,50)}}  
resizerpanel {{EmbedLiveSample("sampleResizerPanel",100,50)}}  
scale-horizontal {{EmbedLiveSample("sampleScaleHorizontal",100,50)}}  
scalethumbend {{EmbedLiveSample("sampleThumbEnd",100,50)}}  
scalethumb-horizontal {{EmbedLiveSample("sampleScaleThumbHorizontal",100,50)}}  
scalethumbstart {{EmbedLiveSample("sampleScaleThumbStart",100,50)}}  
scalethumbtick {{EmbedLiveSample("sampleScaleThumbTick",100,50)}}  
scalethumb-vertical {{EmbedLiveSample("sampleScaleThumbVertical",100,50)}}  
scale-vertical {{EmbedLiveSample("sampleScaleVertical",100,50)}}  
scrollbarbutton-down {{EmbedLiveSample("sampleScrollbarButtonDown",100,50)}}  
scrollbarbutton-left {{EmbedLiveSample("sampleScrollbarButtonLeft",100,50)}}  
scrollbarbutton-right {{EmbedLiveSample("sampleScrollbarButtonRight",100,50)}}  
scrollbarbutton-up {{EmbedLiveSample("sampleScrollbarButtonUp",100,50)}}  
scrollbarthumb-horizontal {{EmbedLiveSample("sampleScrollbarThumbHorizontal",100,50)}}  
scrollbarthumb-vertical {{EmbedLiveSample("sampleScrollbarThumbVertical",100,50)}}  
scrollbartrack-horizontal {{EmbedLiveSample("sampleScrollbarTrackHorizontal",100,50)}}  
scrollbartrack-vertical {{EmbedLiveSample("sampleScrollbarTrackVertical",100,50)}}  
searchfield {{EmbedLiveSample("sampleSearchField",100,50)}}  
separator {{EmbedLiveSample("sampleSeparator",100,50)}}  
sheet {{EmbedLiveSample("sampleSheet",100,50)}}  
spinner {{EmbedLiveSample("sampleSpinner",100,50)}}  
spinner-downbutton {{EmbedLiveSample("sampleSpinnerDownbutton",100,50)}}  
spinner-textfield {{EmbedLiveSample("sampleSpinnerTextfield",100,50)}}  
spinner-upbutton {{EmbedLiveSample("sampleSpinnerUpbutton",100,50)}}  
splitter {{EmbedLiveSample("sampleSplitter",100,50)}}  
statusbar {{EmbedLiveSample("sampleStatusBar",100,50)}}  
statusbarpanel {{EmbedLiveSample("sampleStatusBarPanel",100,50)}}  
tab {{EmbedLiveSample("sampleTab",100,50)}}  
tabpanel {{EmbedLiveSample("sampleTabPanel",100,50)}}  
tabpanels {{EmbedLiveSample("sampleTabPanels",100,50)}}  
tab-scroll-arrow-back {{EmbedLiveSample("sampleTabScrollArrowBack",100,50)}}  
tab-scroll-arrow-forward {{EmbedLiveSample("sampleTabScrollArrowForward",100,50)}}  
textfield {{EmbedLiveSample("sampleTextField",100,50)}}  
textfield-multiline {{EmbedLiveSample("sampleTextfieldMultiline",100,50)}}  
toolbar {{EmbedLiveSample("sampleToolbar",100,50)}}  
toolbarbutton {{EmbedLiveSample("sampleToolbarButton",100,50)}}  
toolbarbutton-dropdown {{EmbedLiveSample("sampleToolbarButtonDropdown",100,50)}}  
toolbargripper {{EmbedLiveSample("sampleToolbarGripper",100,50)}}  
toolbox {{EmbedLiveSample("sampleToolbox",100,50)}}  
tooltip {{EmbedLiveSample("sampleTooltip",100,50)}}  
treeheader {{EmbedLiveSample("sampleTreeHeader",100,50)}}  
treeheadercell {{EmbedLiveSample("sampleTreeHeaderCell",100,50)}}  
treeheadersortarrow {{EmbedLiveSample("sampleTreeHeaderSortArrow",100,50)}}  
treeitem {{EmbedLiveSample("sampleTreeItem",100,50)}}  
treeline {{EmbedLiveSample("sampleTreeLine",100,50)}}  
treetwisty {{EmbedLiveSample("sampleTreeTwisty",100,50)}}  
treetwistyopen {{EmbedLiveSample("sampleTreeTwistyOpen",100,50)}}  
treeview {{EmbedLiveSample("sampleTreeView",100,50)}}  
-moz-mac-unified-toolbar {{EmbedLiveSample("sampleMacUnifiedToolbar",100,50)}} 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.
{{ gecko_minversion_inline("2.0") }} -moz-win-borderless-glass {{EmbedLiveSample("sampleWinBorderlessGlass",100,50)}} Windows Vista and later only. This style applies the Aero Glass effect -- but without a border -- to the element.
-moz-win-browsertabbar-toolbox {{EmbedLiveSample("sampleWinBrowsertabbarToolbox",100,50)}} Windows Vista and later only. This toolbox style is meant to be used for the tab bar in a browser.
-moz-win-communicationstext {{EmbedLiveSample("sampleWinCommunicationstext",100,50)}}  
-moz-win-communications-toolbox {{EmbedLiveSample("sampleWinCommunicationsToolbox",100,50)}} 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.
{{ gecko_minversion_inline("6.0") }} -moz-win-exclude-glass {{EmbedLiveSample("sample",100,50)}} Windows Vista and later only. This styles is used to exclude the Aero Glass effect on the element.
-moz-win-glass {{EmbedLiveSample("sampleWinGlass",100,50)}} Windows Vista and later only. This style applies the Aero Glass effect to the element.
-moz-win-mediatext {{EmbedLiveSample("sampleWinMediaText",100,50)}}  
-moz-win-media-toolbox {{EmbedLiveSample("sampleWinMediaToolbox",100,50)}} 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 {{EmbedLiveSample("sampleWindowButtonBox",100,50)}}  
-moz-window-button-box-maximized {{EmbedLiveSample("sampleWindowButtonBoxMaximized",100,50)}}  
-moz-window-button-close {{EmbedLiveSample("sampleWindowButtonClose",100,50)}}  
-moz-window-button-maximize {{EmbedLiveSample("sampleWindowButtonMaximize",100,50)}}  
-moz-window-button-minimize {{EmbedLiveSample("sampleWindowButtonMinimize",100,50)}}  
-moz-window-button-restore {{EmbedLiveSample("sampleWindowButtonRestore",100,50)}}  
-moz-window-frame-bottom {{EmbedLiveSample("sampleWindowFrameBottom",100,50)}}  
-moz-window-frame-left {{EmbedLiveSample("sampleWindowFrameLeft",100,50)}}  
-moz-window-frame-right {{EmbedLiveSample("sampleWindowFrameRight",100,50)}}  
-moz-window-titlebar {{EmbedLiveSample("sampleWindowTitlebar",100,50)}}  
-moz-window-titlebar-maximized {{EmbedLiveSample("sampleWindowTitlebarMaximized",100,50)}}  

Examples

.exampleone {
	-moz-appearance: toolbarbutton;
}

Specifications

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

Browser compatibility

Browser Lowest version Support of
Internet Explorer --- ---
Firefox (Gecko) 1.0 (1.0)

-moz-appearance

Not fully supported

Opera (Presto) --- ---
Safari | Chrome | WebKit 3.0 | 1.0 | 522 -webkit-appearance

See also

Revision Source

<p>{{Not_standard()}}{{ CSSMozExtensionRef() }}</p>
<h2 id="Summary">Summary</h2>
<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>
<div class="note">
  <p><em>Do not use</em> this property on Web sites: not only is it non-standard, but its behavior changes from one browser to another. Even the keyword <code>none</code> does not have the same behavior on each form element across different browsers, and some do not support it at all.</p>
</div>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }}</dfn> {{ Cssxref("none") }} (but this value is overriden in the user agent css)</li>
  <li><dfn>Applies t</dfn> all elements</li>
  <li><dfn>{{ Xref_cssinherited() }}</dfn> no</li>
  <li><dfn>Media</dfn> {{ Xref_cssvisual() }} <span class="comment">{{ xref_cssinteractive() }} {{ xref_cssaural() }}</span></li>
  <li><dfn>{{ Xref_csscomputed() }}</dfn> as specified</li>
</ul>
<h2 id="Syntax">Syntax</h2>
<pre class="brush: css">
-moz-appearance:  &lt;appearance&gt;
</pre>
<h3 id="Values">Values</h3>
<p><code>&lt;appearance&gt; </code>is one of the following:</p>
<table class="standard-table">
  <tbody>
    <tr>
      <th>Value</th>
      <th>Demo</th>
      <th>Description</th>
    </tr>
    <tr>
      <td><code>none</code></td>
      <td>
        <div id="sampleNone" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: none; -webkit-appearance: none; color: black;}</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;
</pre>
        </div>
        {{EmbedLiveSample("sampleNone",100,50)}}</td>
      <td>No special styling is applied. This is the default. Note, however, {{ bug(649849) }} and {{ bug(605985) }}.</td>
    </tr>
    <tr>
      <td><code>button</code></td>
      <td>
        <div id="sampleButton" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: button; -webkit-appearance: button; color: black; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleButton",100,50)}}</td>
      <td>The element is drawn like a button.</td>
    </tr>
    <tr>
      <td><code>button-arrow-down</code></td>
      <td>
        <div id="sampleButtonArrowDown" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: button-arrow-down; -webkit-appearance: button-arrow-down; color: black; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleButtonArrowDown",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>button-arrow-next</code></td>
      <td>
        <div id="sampleButtonArrowNext" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: button-arrow-next; -webkit-appearance: button-arrow-next; color: black; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleButtonArrowNext",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>button-arrow-previous</code></td>
      <td>
        <div id="sampleButtonArrowPrevious" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: button-arrow-previous; -webkit-appearance: button-arrow-previous; color: black; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleButtonArrowPrevious",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>button-arrow-up</code></td>
      <td>
        <div id="sampleButtonArrowUp" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: button-arrow-up; -webkit-appearance: button-arrow-up; color: black; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleButtonArrowUp",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>button-bevel</code></td>
      <td>
        <div id="sampleButtonBevel" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: button-bevel; -webkit-appearance: button-bevel; color: black; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleButtonBevel",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>button-focus</code></td>
      <td>
        <div id="sampleButtonFocus" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: button-focus; -webkit-appearance: button-focus; color: black; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleButtonFocus",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>caret</code></td>
      <td>
        <div id="sampleCaret" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: caret; -webkit-appearance: caret; color: black; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleCaret",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>checkbox</code></td>
      <td>
        <div id="sampleCheckbox" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: checkbox; -webkit-appearance: checkbox; color: black; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleCheckbox",100,50)}}</td>
      <td>The element is drawn like a checkbox, including only the actual "checkbox" portion.</td>
    </tr>
    <tr>
      <td><code>checkbox-container</code></td>
      <td>
        <div id="sampleCheckboxContainer" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: checkbox-container; -webkit-appearance: checkbox-container; color: black; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleCheckboxContainer",100,50)}}</td>
      <td>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.</td>
    </tr>
    <tr>
      <td><code>checkbox-label</code></td>
      <td>
        <div id="sampleCheckboxLabel" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: checkbox-label; -webkit-appearance: checkbox-label; color: black; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleCheckboxLabel",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>checkmenuitem</code></td>
      <td>
        <div id="sampleCheckmenuitem" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: checkmenuitem; -webkit-appearance: checkmenuitem; height: 20px; color: black; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleCheckmenuitem",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>dualbutton</code></td>
      <td>
        <div id="sampleDualButton" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: dualbutton; -webkit-appearance: dualbutton; color: black; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleDualButton",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>groupbox</code></td>
      <td>
        <div id="sampleGroupbox" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: groupbox; -webkit-appearance: groupbox; color: black; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleGroupbox",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>listbox</code></td>
      <td>
        <div id="sampleListbox" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: listbox; -webkit-appearance: listbox; height:20px; color: black; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleListBox",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>listitem</code></td>
      <td>
        <div id="sampleListItem" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: listitem; -webkit-appearance: listitem; color: black; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleListitem",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>menuarrow</code></td>
      <td>
        <div id="sampleMenuArrow" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: menuarrow; -webkit-appearance: menuarrow; color: black; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleMenuArrow",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>menubar</code></td>
      <td>
        <div id="sampleMenubar" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: menubar; -webkit-appearance: menubar; color: balck; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleMenubar",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>menucheckbox</code></td>
      <td>
        <div id="sampleMenuCheckbox" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: menucheckbox; -webkit-appearance: menucheckbox; color: black; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleMenuCheckbox",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>menuimage</code></td>
      <td>
        <div id="sampleMenuImage" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: menuimage; -webkit-appearance: menuimage; color: black; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleMenuImage",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>menuitem</code></td>
      <td>
        <div id="sampleMenuItem" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: menuitem; -webkit-appearance: menuitem; color: black; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleMenuItem",100,50)}}</td>
      <td>The element is styled as menu item, item is highlighted when hovered.</td>
    </tr>
    <tr>
      <td><code>menuitemtext</code></td>
      <td>
        <div id="sampleMenuItemText" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: menuitemtext; -webkit-appearance: menuitemtext; color: black; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleMenuItemText",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>menulist</code></td>
      <td>
        <div id="sampleMenuList" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: menulist; -webkit-appearance: menulist; color: black; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleMenuList",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>menulist-button</code></td>
      <td>
        <div id="sampleMenuListButton" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: menulist-button; -webkit-appearance: menulist-button; color: black; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleMenuListButton",100,50)}}</td>
      <td>The element is styled as a button that would indicate a menulist can be opened.</td>
    </tr>
    <tr>
      <td><code>menulist-text</code></td>
      <td>
        <div id="sampleMenuListText" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: menulist-text; -webkit-appearance: menulist-text; color: black; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleMenuListText",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>menulist-textfield</code></td>
      <td>
        <div id="sampleMenuListTextfield" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: menulist-textfield; -webkit-appearance: menulist-textfield; color: black; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleMenuListTextfield",100,50)}}</td>
      <td>The element is styled as the text field for a menulist. (Not implemented for the Windows platform)</td>
    </tr>
    <tr>
      <td><code>menupopup</code></td>
      <td>
        <div id="sampleMenuPopup" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: menupopup; -webkit-appearance: menupopup; color: black; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleMenuPopup",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>menuradio</code></td>
      <td>
        <div id="sampleMenuRadio" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: menuradio; -webkit-appearance: menuradio; color: black; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleMenuRadio",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>menuseparator</code></td>
      <td>
        <div id="sampleMenuSeparator" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: menuseparator; -webkit-appearance: menuseparator; color: transparent; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleMenuSeparator",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>meterbar</code></td>
      <td>
        <div id="sampleMeterbar" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: meterbar; -webkit-appearance: meterbar; color: black; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleMeterbar",100,50)}}</td>
      <td>New in Fx 16.</td>
    </tr>
    <tr>
      <td><code>meterchunk</code></td>
      <td>
        <div id="sampleMeterchunk" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: meterchunk; -webkit-appearance: meterchunk; color: black; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleMeterchunk",100,50)}}</td>
      <td>New in Fx 16</td>
    </tr>
    <tr>
      <td><code>progressbar</code></td>
      <td>
        <div id="sampleProgressBar" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: progressbar; -webkit-appearance: progressbar; color: black; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleMenuProgressBar",100,50)}}</td>
      <td>The element is styled like a progress bar.</td>
    </tr>
    <tr>
      <td><code>progressbar-vertical</code></td>
      <td>
        <div id="sampleProgressBarVertical" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: progressbar-vertical; -webkit-appearance: preogressbar-vertical; color: transparent; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleProgressBarVertical",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>progresschunk</code></td>
      <td>
        <div id="sampleProgressChunk" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: progresschunk; -webkit-appearance: progresschunk; color: black; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleProgressChunk",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>progresschunk-vertical</code></td>
      <td>
        <div id="sampleProgressChunkVertical" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: progresschunk-vertical; -webkit-appearance: progresschunk-vertical; color: black; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleProgressChunkVertical",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>radio</code></td>
      <td>
        <div id="sampleRadio" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: radio; -webkit-appearance: radio; color: black; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleRadio",100,50)}}</td>
      <td>The element is drawn like a radio button, including only the actual "radio button" portion.</td>
    </tr>
    <tr>
      <td><code>radio-container</code></td>
      <td>
        <div id="sampleRadioContainer" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: radio-container; -webkit-appearance: radio-container; color: black; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleRadioContainer",100,50)}}</td>
      <td>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.</td>
    </tr>
    <tr>
      <td><code>radio-label</code></td>
      <td>
        <div id="sampleRadioLabel" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: radio-label; -webkit-appearance: radio-label; color: black; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleRadioLabel",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>radiomenuitem</code></td>
      <td>
        <div id="sampleRadioMenuItem" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: radiomenuitem; -webkit-appearance: radiomenuitem; color: black; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleRadioMenuItem",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>resizer</code></td>
      <td>
        <div id="sampleResizer" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: resizer; -webkit-appearance: resizer; color: transparent; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleResizer",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>resizerpanel</code></td>
      <td>
        <div id="sampleResizerPanel" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: resizerpanel; -webkit-appearance: resizerpanel; color: black; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleResizerPanel",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>scale-horizontal</code></td>
      <td>
        <div id="sampleScaleHorizontal" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: scale-horizontal; -webkit-appearance: scale-horizontal; color: transparent; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleScaleHorizontal",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>scalethumbend</code></td>
      <td>
        <div id="sampleThumbEnd" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: scalethumbend; -webkit-appearance: scalethumbend; color: black; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleThumbEnd",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>scalethumb-horizontal</code></td>
      <td>
        <div id="sampleScaleThumbHorizontal" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: scalethumb-horizontal; -webkit-appearance: scalethumb-horizontal; color: transparent; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleScaleThumbHorizontal",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>scalethumbstart</code></td>
      <td>
        <div id="sampleScaleThumbStart" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: scalethumbstart; -webkit-appearance: scalethumbstart; color: black; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleScaleThumbStart",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>scalethumbtick</code></td>
      <td>
        <div id="sampleScaleTumbTick" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: scalethumbtick; -webkit-appearance: scalethumbtick; color: black; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleScaleThumbTick",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>scalethumb-vertical</code></td>
      <td>
        <div id="sampleScaleThumbVertical" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: scalethumb-vertical; -webkit-appearance: scalethumb-vertical; color: black; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleScaleThumbVertical",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>scale-vertical</code></td>
      <td>
        <div id="sampleScaleVertical" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: scale-vertical; -webkit-appearance: scale-vertical; color: transparent; }</pre>
          <pre class="brush:html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleScaleVertical",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>scrollbarbutton-down</code></td>
      <td>
        <div id="sampleScrollbarButtonDown" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: scrollbarbutton-down; -webkit-appearance: scrollbarbutton-down; color: black; }</pre>
          <pre class="bruh: html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleScrollbarButtonDown",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>scrollbarbutton-left</code></td>
      <td>
        <div id="sampleScrollbarButtonLeft" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: scrollbarbutton-left; -webkit-appearance: scrollbarbutton-left; color: black; }</pre>
          <pre class="bruh: html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleScrollbarButtonLeft",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>scrollbarbutton-right</code></td>
      <td>
        <div id="sampleScrollbarButtonRight" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: scrollbarbutton-right; -webkit-appearance: scrollbarbutton-right; color: black; }</pre>
          <pre class="bruh: html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleScrollbarButtonRight",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>scrollbarbutton-up</code></td>
      <td>
        <div id="sampleScrollbarButtonUp" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: scrollbarbutton-up; -webkit-appearance: scrollbarbutton-up; color: black; }</pre>
          <pre class="bruh: html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleScrollbarButtonUp",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>scrollbarthumb-horizontal</code></td>
      <td>
        <div id="sampleScrollbarThumbHorizontal" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: scrollbarthumb-horizontal; -webkit-appearance: scrollbarthumb-horizontal; color: black; }</pre>
          <pre class="bruh: html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleScrollbarThumbHorizontal",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>scrollbarthumb-vertical</code></td>
      <td>
        <div id="sampleScrollbarThumbVertical" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: scrollbarthumb-vertical; -webkit-appearance: scrollbarthumb-vertical; color: black; }</pre>
          <pre class="bruh: html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleScrollbarThumbVertical",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>scrollbartrack-horizontal</code></td>
      <td>
        <div id="sampleScrollbarTrackHorizontal" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: scrollbartrack-horizontal; -webkit-appearance: scrollbartrack-horizontal; color: black; }</pre>
          <pre class="bruh: html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleScrollbarTrackHorizontal",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>scrollbartrack-vertical</code></td>
      <td>
        <div id="sampleScrollbarTrack-vertical" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: scrollbartrack-vertical; -webkit-appearance: scrollbarbartrack-vertical; color: black; }</pre>
          <pre class="bruh: html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleScrollbarTrackVertical",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>searchfield</code></td>
      <td>
        <div id="sampleSearchField" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: searchfield; -webkit-appearance: searchfield; color: black; }</pre>
          <pre class="bruh: html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleSearchField",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>separator</code></td>
      <td>
        <div id="sampleSeparator" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: separator; -webkit-appearance: separator; color: transparent; }</pre>
          <pre class="bruh: html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleSeparator",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>sheet</code></td>
      <td>
        <div id="sampleSheet" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: sheet; -webkit-appearance: sheet; color: black; }</pre>
          <pre class="brush: html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleSheet",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>spinner</code></td>
      <td>
        <div id="sampleSpinner" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: spinner; -webkit-appearance: spinner; color: transparent; }</pre>
          <pre class="brush: html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleSpinner",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>spinner-downbutton</code></td>
      <td>
        <div id="sampleSpinnerDownbutton" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: spinner-downbutton; -webkit-appearance: spinner-downbutton; color: black; }</pre>
          <pre class="brush: html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleSpinnerDownbutton",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>spinner-textfield</code></td>
      <td>
        <div id="sampleSpinnerTextfield" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: spinner-textfield; -webkit-appearance: spinner-textfield; color: black; }</pre>
          <pre class="brush: html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleSpinnerTextfield",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>spinner-upbutton</code></td>
      <td>
        <div id="sampleSpinnerUpbutton" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: spinner-upbutton; -webkit-appearance: spinner-upbutton; color: black; }</pre>
          <pre class="brush: html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleSpinnerUpbutton",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>splitter</code></td>
      <td>
        <div id="sampleSplitter" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: splitter; -webkit-appearance: splitter; color: transparent; }</pre>
          <pre class="brush: html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleSplitter",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>statusbar</code></td>
      <td>
        <div id="sampleStatusBar" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: statusbar; -webkit-appearance: statusbar; color: black; }</pre>
          <pre class="brush: html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleStatusBar",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>statusbarpanel</code></td>
      <td>
        <div id="sampleStatusBarPanel" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: statusbarpanel; -webkit-appearance: statusbarpanel; color: black; }</pre>
          <pre class="brush: html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleStatusBarPanel",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>tab</code></td>
      <td>
        <div id="sampleTab" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: tab; -webkit-appearance: tab; height: 20px; color: black; }</pre>
          <pre class="brush: html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleTab",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>tabpanel</code></td>
      <td>
        <div id="sampleTabPanel" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: tabpanel; -webkit-appearance: tabpanel; color: black; }</pre>
          <pre class="brush: html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleTabPanel",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>tabpanels</code></td>
      <td>
        <div id="sampleTabPanels" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: tabpanels; -webkit-appearance: tabpanels; color: black; }</pre>
          <pre class="brush: html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleTabPanels",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>tab-scroll-arrow-back</code></td>
      <td>
        <div id="sampleTabScrollArrowBack" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: tab-scroll-arrow-back; -webkit-appearance: tab-scroll-arrow-back; color: black; }</pre>
          <pre class="brush: html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleTabScrollArrowBack",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>tab-scroll-arrow-forward</code></td>
      <td>
        <div id="sampleTabScrollArrowForward" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: tab-scroll-arrow-forward; -webkit-appearance: tab-scroll-arrow-forward; color: black; }</pre>
          <pre class="brush: html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleTabScrollArrowForward",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>textfield</code></td>
      <td>
        <div id="sampleTextfield" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: textfield; -webkit-appearance: textfield; color: black; }</pre>
          <pre class="brush: html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleTextField",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>textfield-multiline</code></td>
      <td>
        <div id="sampleTextfieldMultiline" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: textfield-multiline; -webkit-appearance: textfield-multiline; color: black; }</pre>
          <pre class="brush: html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleTextfieldMultiline",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>toolbar</code></td>
      <td>
        <div id="sampleToolbar" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: toolbar; -webkit-appearance: toolbar; color: black; }</pre>
          <pre class="brush: html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleToolbar",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>toolbarbutton</code></td>
      <td>
        <div id="sampleToolbarButton" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: toolbarbutton; -webkit-appearance: toolbarbutton; color: black; }</pre>
          <pre class="brush: html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleToolbarButton",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>toolbarbutton-dropdown</code></td>
      <td>
        <div id="sampleToolbarButtonDropdown" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: toolbarbutton-dropdown; -webkit-appearance: toolbarbutton-dropdown; color: black; }</pre>
          <pre class="brush: html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleToolbarButtonDropdown",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>toolbargripper</code></td>
      <td>
        <div id="sampleToolbarGripper" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: toolbargripper; -webkit-appearance: toolbargripper; color: black; }</pre>
          <pre class="brush: html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleToolbarGripper",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>toolbox</code></td>
      <td>
        <div id="sampleToolbox" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: toolbox; -webkit-appearance: toolbox; color: black; }</pre>
          <pre class="brush: html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleToolbox",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>tooltip</code></td>
      <td>
        <div id="sampleTooltip" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: tooltip; -webkit-appearance: tooltip; color: black; }</pre>
          <pre class="brush: html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleTooltip",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>treeheader</code></td>
      <td>
        <div id="sampleTreeHeader" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: treeheader; -webkit-appearance: treeheader; color: black; }</pre>
          <pre class="brush: html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleTreeHeader",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>treeheadercell</code></td>
      <td>
        <div id="sampleTreeHeaderCell" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: treeheadercell; -webkit-appearance: treeheadercell; height:20px; color: black; }</pre>
          <pre class="brush: html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleTreeHeaderCell",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>treeheadersortarrow</code></td>
      <td>
        <div id="sampleTreeHeaderSortArrow" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: treeheadersortarrow; -webkit-appearance: treeheadersortarrow; color: black; }</pre>
          <pre class="brush: html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleTreeHeaderSortArrow",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>treeitem</code></td>
      <td>
        <div id="sampleTreeItem" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: treeitem; -webkit-appearance: treeitem; color: black; }</pre>
          <pre class="brush: html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleTreeItem",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>treeline</code></td>
      <td>
        <div id="sampleTreeLine" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: treeline; -webkit-appearance: treeline; color: black; }</pre>
          <pre class="brush: html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleTreeLine",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>treetwisty</code></td>
      <td>
        <div id="sampleTreeTwisty" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: treetwisty; -webkit-appearance: treetwisty; color: transparent; }</pre>
          <pre class="brush: html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleTreeTwisty",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>treetwistyopen</code></td>
      <td>
        <div id="sampleTreeTwistyOpen" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: treetwistyopen; -webkit-appearance: treetwistyopen; color: transparent; }</pre>
          <pre class="brush: html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleTreeTwistyOpen",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>treeview</code></td>
      <td>
        <div id="sampleTreeView" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: treeview; -webkit-appearance: treeview; color: black; }</pre>
          <pre class="brush: html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleTreeView",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>-moz-mac-unified-toolbar</code></td>
      <td>
        <div id="sampleMacUnifiedToolbar" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: -moz-mac-unified-toolbar; color: black; }</pre>
          <pre class="brush: html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleMacUnifiedToolbar",100,50)}}</td>
      <td><strong>Mac OS X only</strong>. This causes the toolbar and title bar to render using the unified toolbar style common to Mac OS X 10.4 and later applications.</td>
    </tr>
    <tr>
      <td>{{ gecko_minversion_inline("2.0") }} <code>-moz-win-borderless-glass</code></td>
      <td>
        <div id="sampleWinBorderlessGlass" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: -moz-win-borderless-glass; color: black; }</pre>
          <pre class="brush: html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleWinBorderlessGlass",100,50)}}</td>
      <td><strong>Windows Vista and later only</strong>. This style applies the Aero Glass effect -- but without a border -- to the element.</td>
    </tr>
    <tr>
      <td><code>-moz-win-browsertabbar-toolbox</code></td>
      <td>
        <div id="sampleWinBrowsertabbarToolbox" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: -moz-win-browsertabbar-toolbox; color: black; }</pre>
          <pre class="brush: html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleWinBrowsertabbarToolbox",100,50)}}</td>
      <td><strong>Windows Vista and later only</strong>. This toolbox style is meant to be used for the tab bar in a browser.</td>
    </tr>
    <tr>
      <td><code>-moz-win-communicationstext</code></td>
      <td>
        <div id="sampleWinCommunicationstext" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: -moz-win-communicationstext; color: black; }</pre>
          <pre class="brush: html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleWinCommunicationstext",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>-moz-win-communications-toolbox</code></td>
      <td>
        <div id="sampleWinCommunicationsToolbox" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: -moz-win-communications-toolbox; color: black; }</pre>
          <pre class="brush: html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleWinCommunicationsToolbox",100,50)}}</td>
      <td><strong>Windows Vista and later only</strong>. This toolbox style is meant to be used in communications and productivity applications. Corresponding foreground color is <code>-moz-win-communicationstext</code>.</td>
    </tr>
    <tr>
      <td>{{ gecko_minversion_inline("6.0") }} <code>-moz-win-exclude-glass</code></td>
      <td>
        <div id="sampleWinExcludeGlass" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: -moz-win-exclude-glass; color: black; }</pre>
          <pre class="brush: html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sample",100,50)}}</td>
      <td><strong>Windows Vista and later only. </strong>This styles is used to exclude the Aero Glass effect on the element.</td>
    </tr>
    <tr>
      <td><code>-moz-win-glass</code></td>
      <td>
        <div id="sampleWinGlass" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: -moz-win-glass; color: black; }</pre>
          <pre class="brush: html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleWinGlass",100,50)}}</td>
      <td><strong>Windows Vista and later only</strong>. This style applies the Aero Glass effect to the element.</td>
    </tr>
    <tr>
      <td><code>-moz-win-mediatext</code></td>
      <td>
        <div id="sampleWinMediaText" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: -moz-win-mediatext; color: black; }</pre>
          <pre class="brush: html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleWinMediaText",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>-moz-win-media-toolbox</code></td>
      <td>
        <div id="sampleWinMediaToolbox" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: -moz-win-media-toolbox; color: black; }</pre>
          <pre class="brush: html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleWinMediaToolbox",100,50)}}</td>
      <td><strong>Windows Vista and later only</strong>. This toolbox style is meant to be used in applications that manage media objects. Corresponding foreground color is <code>-moz-win-mediatext</code>.</td>
    </tr>
    <tr>
      <td><code>-moz-window-button-box</code></td>
      <td>
        <div id="sampleWindowButtonBox" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: -moz-window-button-box; color: black; }</pre>
          <pre class="brush: html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleWindowButtonBox",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>-moz-window-button-box-maximized</code></td>
      <td>
        <div id="sampleWindowButtonBoxMaximized" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: -moz-window-button-box-maximized; color: black; }</pre>
          <pre class="brush: html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleWindowButtonBoxMaximized",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>-moz-window-button-close</code></td>
      <td>
        <div id="sampleWindowButtonClose" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: -moz-window-button-close; color: black; }</pre>
          <pre class="brush: html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleWindowButtonClose",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>-moz-window-button-maximize</code></td>
      <td>
        <div id="sampleWindowButtonMaximize" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: -moz-window-button-maximize; color: black; }</pre>
          <pre class="brush: html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleWindowButtonMaximize",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>-moz-window-button-minimize</code></td>
      <td>
        <div id="sampleWindowButtonMinimize" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: -moz-window-button-minimize; color: black; }</pre>
          <pre class="brush: html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleWindowButtonMinimize",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>-moz-window-button-restore</code></td>
      <td>
        <div id="sampleWindowButtonRestore" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: -moz-window-button-restore; color: black; }</pre>
          <pre class="brush: html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleWindowButtonRestore",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>-moz-window-frame-bottom</code></td>
      <td>
        <div id="sampleWindowFrameBottom" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: -moz-window-frame-bottom; color: black; }</pre>
          <pre class="brush: html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleWindowFrameBottom",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>-moz-window-frame-left</code></td>
      <td>
        <div id="sampleWindowFrameLeft" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: -moz-window-frame-left; color: black; }</pre>
          <pre class="brush: html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleWindowFrameLeft",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>-moz-window-frame-right</code></td>
      <td>
        <div id="sampleWindowFrameRight" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: -moz-window-frame-right; color: black; }</pre>
          <pre class="brush: html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleWindowFrameRight",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>-moz-window-titlebar</code></td>
      <td>
        <div id="sampleWindowTitlebar" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: -moz-window-titlebar; color: black; }</pre>
          <pre class="brush: html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleWindowTitlebar",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>-moz-window-titlebar-maximized</code></td>
      <td>
        <div id="sampleWindowTitlebarMaximized" style="display:none">
          <pre class="brush:css">
 div {-moz-appearance: -moz-window-titlebar-maximized; color: black; }</pre>
          <pre class="brush: html">
          &lt;div&gt;Lorem&lt;/div&gt;</pre>
        </div>
        {{EmbedLiveSample("sampleWindowTitlebarMaximized",100,50)}}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Examples">Examples</h2>
<pre>
.exampleone {
	-moz-appearance: toolbarbutton;
}
</pre>
<h2 id="Specifications">Specifications</h2>
<p>The <code>appearance</code> property is currently not present in any newer CSS specification.</p>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<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>
        <p><code>-moz-appearance</code></p>
        <p>Not fully supported</p>
      </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>
<h2 id="See_also">See also</h2>
<ul>
  <li><a class="external" href="http://www.w3.org/TR/2004/CR-css3-ui-20040511/#appearance">CSS 3 Basic User Interface #appearance</a> Candidate Recommendation 2004-05-11, outdated (The <code>appearance</code> property has been dropped in newer version of this specification.</li>
  <li><a class="external" href="http://wiki.csswg.org/spec/css4-ui#dropped-css3-features">Dropped CSS3 features from the UI spec</a>.</li>
</ul>
Revert to this revision