-moz-appearance

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

The -webkit-appearance property is used by WebKit-based (e.g., Safari) and Blink-based (e.g., Chrome, Opera) browsers to achieve the same thing. Note that Firefox and Edge also support -webkit-appearance, for compatibility reasons.

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

/* CSS Basic User Interface Module Level 4 values */
appearance: none;
appearance: auto;

/* Partial list of available values in Gecko */
-moz-appearance: none;
-moz-appearance: button;
-moz-appearance: checkbox;
-moz-appearance: scrollbarbutton-up;

/* Partial list of available values in WebKit/Blink (as well as Gecko and Edge) */
-webkit-appearance: none;
-webkit-appearance: button;
-webkit-appearance: checkbox;
-webkit-appearance: scrollbarbutton-up;

The -moz-appearance property may be specified as a single value chosen from the list below.

Values

<appearance> is one of the following keywords:

Formal syntax

auto | none

Examples

The following would make an element look like a toolbar button in Firefox:

.exampleone {
  -moz-appearance: toolbarbutton;
}

See also this JSFiddle for an example showing how you might use appearance: none to apply custom styling to radio buttons and checkboxes.

Specifications

Browser compatibilityUpdate compatibility data on GitHub

See also

• Definition of appearance in CSS 3 Basic User Interface (Candidate Recommendation from 2004-05-11).
• Dropped CSS3 features from the UI spec.4