当前位置：文江博客知识库 en-US 文档 Web CSS -moz-appearance

appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets 编辑

The appearance CSS property is used to display an element using platform-native styling, based on the operating system's theme. The -moz-appearance and -webkit-appearance properties are non-standard versions of this property, used (respectively) by Gecko (Firefox) and 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.

The -moz-appearance property was used in XUL stylesheets to design custom widgets with platform-appropriate styling. It was also used in the XBL implementations of the widgets that ship with the Mozilla platform. Starting with Gecko/Firefox 80, these uses were changed to -moz-default-appearance, which should never be used outside of internal stylesheets.

Compatibility note: If you wish to use this property on websites, you should test it very carefully. Although it is supported in most modern browsers, its implementation varies. In older browsers, even the keyword none does not have the same effect on all form elements across different browsers, and some do not support it at all. The differences are smaller in the newest browsers.

Syntax

/* CSS Basic User Interface Module Level 4 values */
appearance: none;
appearance: auto;
appearance: menulist-button;
appearance: textfield;

/* "Compat-auto" values, which have the same effect as 'auto' */
appearance: button;
appearance: searchfield;
appearance: textarea;
appearance: push-button;
appearance: slider-horizontal;
appearance: checkbox;
appearance: radio;
appearance: square-button;
appearance: menulist;
appearance: listbox;
appearance: meter;
appearance: progress-bar;

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

/* Partial list of available values in WebKit/Blink (as well as Gecko and Edge) */
-webkit-appearance: media-mute-button;
-webkit-appearance: caret;

Values

Standard keywords

Value	Demo	Browser	Description
`none`	`div{ color: black; -moz-appearance:none; -webkit-appearance:none; appearance:none; }` `<div>Lorem</div>`	Firefox Chrome Safari Edge	No special styling is applied. This is the default.
`auto`	`div{ color: black; -moz-appearance: auto; -webkit-appearance: auto; appearance:auto; }` `<div>Lorem</div>`	Firefox Chrome	The user agent selects the appropriate special styling based on the element. Acts as `none` on elements with no special styling.
`menulist-button`	`div { color: black; -moz-appearance: menulist-button; -webkit-appearance: menulist-button; }` `<div>Lorem</div>`	Firefox Chrome Safari Edge	The element is styled as a button that would indicate a menulist can be opened.
`textfield`	`div { color: black; -moz-appearance: textfield; -webkit-appearance: textfield; }` `<div>Lorem</div>`	Firefox Chrome Safari Edge
The following values are treated as equivalent to `auto`:
`button`	`div { color: black; -moz-appearance: button; -webkit-appearance: button; }` `<div>Lorem</div>`	Firefox Chrome Safari Edge	The element is drawn like a button.
`checkbox`	`div { color: black; -moz-appearance: checkbox; -webkit-appearance: checkbox; }` `<div>Lorem</div>`	Firefox Chrome Safari Edge	The element is drawn like a checkbox, including only the actual "checkbox" portion.
`listbox`	`div { color: black; height:20px; -moz-appearance: listbox; -webkit-appearance: listbox; }` `<div>Lorem</div>`	Firefox Chrome Safari Edge
`menulist`	`div { color: black; -moz-appearance: menulist; -webkit-appearance: menulist; }` `<div>Lorem</div>`	Firefox Chrome Safari Edge
`meter`	`div{ color: black; -webkit-appearance: meter; }` `<div>Lorem</div>`	Chrome Safari Firefox
`progress-bar`	`div{ color: black; -webkit-appearance: progress-bar; }` `<div>Lorem</div>`	Chrome Safari Firefox
`push-button`	`div{ color: black; -webkit-appearance: push-button; }` `<div>Lorem</div>`	Chrome Safari Edge
`radio`	`div { color: black; -moz-appearance: radio; -webkit-appearance: radio; }` `<div>Lorem</div>`	Firefox Chrome Safari Edge	The element is drawn like a radio button, including only the actual "radio button" portion.
`searchfield`	`div { color: black; -moz-appearance: searchfield; -webkit-appearance: searchfield; }` <div>Lorem</div>	Firefox Chrome Safari Edge
`slider-horizontal`	`div{ color: black; -webkit-appearance: slider-horizontal; }` `<div>Lorem</div>`	Chrome Safari Edge
`square-button`	`div{ color: black; -moz-appearance: square-button; -webkit-appearance: square-button; }` `<div>Lorem</div>`	Chrome Safari Edge
`textarea`	`div{ color: black; -webkit-appearance: textarea; }` `<div>Lorem</div>`	Firefox Chrome Safari Edge

Non-standard keywords

The following values are implemented only for one or both of the prefixed properties, but not on the standard appearance property.

Value	Demo	Browser	Description
`attachment`	`div{ color: black; -moz-appearance: attachment; -webkit-appearance: attachment; }` `<div>Lorem</div>`	Safari
`borderless-attachment`	`div{ color: black; -moz-appearance: borderless-attachment; -webkit-appearance: borderless-attachment; }` `<div>Lorem</div>`	Safari
`button-bevel`	`div { color: black; -moz-appearance: button-bevel; -webkit-appearance: button-bevel; }` `<div>Lorem</div>`	Firefox Chrome Safari Edge
`caps-lock-indicator`	`div{ color: black; -moz-appearance: caps-lock-indicator; -webkit-appearance: caps-lock-indicator; }` `<div>Lorem</div>`	Safari Edge
`caret`	`div { color: black; -moz-appearance: caret; -webkit-appearance: caret; }` `<div>Lorem</div>`	Firefox Chrome Safari Edge
`checkbox-container`	`div { color: black; -moz-appearance: checkbox-container; -webkit-appearance: checkbox-container; }` `<div>Lorem</div>`	Firefox	The element is drawn like a container for a checkbox, which may include a prelighting background effect under certain platforms. Normally it would contain a label and a checkbox.
`checkbox-label`	`div { color: black; -moz-appearance: checkbox-label; -webkit-appearance: checkbox-label; }` `<div>Lorem</div>`	Firefox
`checkmenuitem`	`div { color: black; height: 20px; -moz-appearance: checkmenuitem; -webkit-appearance: checkmenuitem; }` `<div>Lorem</div>`	Firefox
`color-well`	`div{ color: black; -moz-appearance: color-well; -webkit-appearance: color-well; }` `<div>Lorem</div>`	Safari	`input type=color`
`continuous-capacity-level-indicator`	`div{ color: black; -moz-appearance: continuous-capacity-level-indicator; -webkit-appearance: continuous-capacity-level-indicator; }` `<div>Lorem</div>`	Safari
`default-button`	`div{ color: black; -moz-appearance: default-button; -webkit-appearance: default-button; }` `<div>Lorem</div>`	Safari Edge
`discrete-capacity-level-indicator`	`div{ color: black; -moz-appearance: discrete-capacity-level-indicator; -webkit-appearance: discrete-capacity-level-indicator; }` `<div>Lorem</div>`	Safari
`inner-spin-button`	`div{ color: black; -webkit-appearance: inner-spin-button; }` `<div>Lorem</div>`	Firefox Chrome Safari
`image-controls-button`	`div{ color: black; -moz-appearance: image-controls-button; -webkit-appearance: image-controls-button; }` `<div>Lorem</div>`	Safari
`list-button`	`div{ color: black; -moz-appearance: list-button; -webkit-appearance: list-button; }` `<div>Lorem</div>`	Safari	datalist
`listitem`	`div { color: black; -moz-appearance: listitem; -webkit-appearance: listitem; }` `<div>Lorem</div>`	Firefox Chrome Safari Edge
`media-enter-fullscreen-button`	`div{ color: black; -webkit-appearance: media-enter-fullscreen-button; }` `<div>Lorem</div>`	Chrome Safari
`media-exit-fullscreen-button`	`div{ color: black; -webkit-appearance: media-exit-fullscreen-button; }` `<div>Lorem</div>`	Chrome Safari
`media-fullscreen-volume-slider`	`div{ color: black; -moz-appearance: media-fullscreen-volume-slider; -webkit-appearance: media-fullscreen-volume-slider; }` `<div>Lorem</div>`	Safari
`media-fullscreen-volume-slider-thumb`	`div{ color: black; -moz-appearance: media-fullscreen-volume-slider-thumb; -webkit-appearance: media-fullscreen-volume-slider-thumb; }` `<div>Lorem</div>`	Safari
`media-mute-button`	`div{ color: black; -webkit-appearance: media-mute-button; }` `<div>Lorem</div>`	Chrome Safari Edge
`media-play-button`	`div{ color: black; -webkit-appearance: media-play-button; }` `<div>Lorem</div>`	Chrome Safari Edge
`media-overlay-play-button`	`div{ color: black; -webkit-appearance: media-overlay-play-button; }` `<div>Lorem</div>`	Chrome Safari
`media-return-to-realtime-button`	`div{ color: black; -moz-appearance: media-return-to-realtime-button; -webkit-appearance: media-return-to-realtime-button; }` `<div>Lorem</div>`	Safari
`media-rewind-button`	`div{ color: black; -moz-appearance: media-rewind-button; -webkit-appearance: media-rewind-button; }` `<div>Lorem</div>`	Safari
`media-seek-back-button`	`div{ color: black; -moz-appearance: media-seek-back-button; -webkit-appearance: media-seek-back-button; }` `<div>Lorem</div>`	Safari Edge
`media-seek-forward-button`	`div{ color: black; -moz-appearance: media-seek-forward-button; -webkit-appearance: media-seek-forward-button; }` `<div>Lorem</div>`	Safari Edge
`media-toggle-closed-captions-button`	`div{ color: black; -webkit-appearance: media-toggle-closed-captions-button; }` `<div>Lorem</div>`	Chrome Safari
`media-slider`	`div{ color: black; -webkit-appearance: media-slider; }` `<div>Lorem</div>`	Chrome Safari Edge
`media-sliderthumb`	`div{ color: black; -webkit-appearance: media-sliderthumb; }` `<div>Lorem</div>`	Chrome Safari Edge
`media-volume-slider-container`	`div{ color: black; -webkit-appearance: media-volume-slider-container; }` `<div>Lorem</div>`	Chrome Safari
`media-volume-slider-mute-button`	`div{ color: black; -moz-appearance: media-volume-slider-mute-button; -webkit-appearance: media-volume-slider-mute-button; }` `<div>Lorem</div>`	Safari
`media-volume-slider`	`div{ color: black; -webkit-appearance: media-volume-slider; }` `<div>Lorem</div>`	Chrome Safari
`media-volume-sliderthumb`	`div{ color: black; -webkit-appearance: media-volume-slider-thumb; }` `<div>Lorem</div>`	Chrome Safari
`media-controls-background`	`div{ color: black; -webkit-appearance: media-controls-background; }` `<div>Lorem</div>`	Chrome Safari
`media-controls-dark-bar-background`	`div{ color: black; -moz-appearance: media-controls-dark-bar-background; -webkit-appearance: media-controls-dark-bar-background; }` `<div>Lorem</div>`	Safari
`media-controls-fullscreen-background`	`div{ color: black; -webkit-appearance: media-controls-fullscreen-background; }` `<div>Lorem</div>`	Chrome Safari
`media-controls-light-bar-background`	`div{ color: black; -moz-appearance: media-controls-light-bar-background; -webkit-appearance: media-controls-light-bar-background; }` `<div>Lorem</div>`	Safari
`media-current-time-display`	`div{ color: black; -webkit-appearance: media-current-time-display; }` `<div>Lorem</div>`	Chrome Safari
`media-time-remaining-display`	`div{ color: black; -webkit-appearance: media-time-remaining-display; }` `<div>Lorem</div>`	Chrome Safari
`menulist-text`	`div { color: black; -moz-appearance: menulist-text; -webkit-appearance: menulist-text; }` `<div>Lorem</div>`	Firefox Chrome Safari Edge
`menulist-textfield`	`div { color: black; -moz-appearance: menulist-textfield; -webkit-appearance: menulist-textfield; }` `<div>Lorem</div>`	Firefox Chrome Safari Edge	The element is styled as the text field for a menulist. (Not implemented for the Windows platform)
`meterbar`	`div { color: black; -moz-appearance: meterbar; -webkit-appearance: meterbar; }` `<div>Lorem</div>`	Firefox	Use `meter` instead.
`number-input`	`div { color: black; -moz-appearance: number-input; -webkit-appearance: number-input; }` `<div>Lorem</div>`	Firefox
`progress-bar-value`	`div{ color: black; -webkit-appearance: progress-bar-value; }` `<div>Lorem</div>`	Chrome Safari
`progressbar`	`div { color: black; -moz-appearance: progressbar; -webkit-appearance: progressbar; }` `<div>Lorem</div>`	Firefox	The element is styled like a progress bar. Use `progress-bar` instead
`progressbar-vertical`	`div { color: transparent; -moz-appearance: progressbar-vertical; -webkit-appearance: preogressbar-vertical; }` `<div>Lorem</div>`	Firefox
`range`	`div { color: black; -moz-appearance: range; -webkit-appearance: range; }` range `<div>Lorem</div>`	Firefox
`range-thumb`	`div { color: black; -moz-appearance: range-thumb; -webkit-appearance: range-thumb; }` `<div>Lorem</div>`	Firefox
`rating-level-indicator`	`div{ color: black; -moz-appearance: rating-level-indicator; -webkit-appearance: rating-level-indicator; }` `<div>Lorem</div>`	Safari
`relevancy-level-indicator`	`div{ color: black; -moz-appearance: relevancy-level-indicator; -webkit-appearance: relevancy-level-indicator; }` `<div>Lorem</div>`	Safari
`scale-horizontal`	`div { color: transparent; -moz-appearance: scale-horizontal; -webkit-appearance: scale-horizontal; }` `<div>Lorem</div>`	Firefox
`scalethumbend`	`div { color: black; -moz-appearance: scalethumbend; -webkit-appearance: scalethumbend; }` `<div>Lorem</div>`	Firefox
`scalethumb-horizontal`	`div { color: transparent; -moz-appearance: scalethumb-horizontal; -webkit-appearance: scalethumb-horizontal; }` `<div>Lorem</div>`	Firefox
`scalethumbstart`	`div { color: black; -moz-appearance: scalethumbstart; -webkit-appearance: scalethumbstart; }` `<div>Lorem</div>`	Firefox
`scalethumbtick`	`div { color: black; -moz-appearance: scalethumbtick; -webkit-appearance: scalethumbtick; }` `<div>Lorem</div>`	Firefox
`scalethumb-vertical`	`div { color: black; -moz-appearance: scalethumb-vertical; -webkit-appearance: scalethumb-vertical; }` `<div>Lorem</div>`	Firefox
`scale-vertical`	`div { color: transparent; -moz-appearance: scale-vertical; -webkit-appearance: scale-vertical; }` `<div>Lorem</div>`	Firefox
`scrollbarthumb-horizontal`	`div { color: black; -moz-appearance: scrollbarthumb-horizontal; -webkit-appearance: scrollbarthumb-horizontal; }` <div>Lorem</div>	Firefox
`scrollbarthumb-vertical`	`div { color: black; -moz-appearance: scrollbarthumb-vertical; -webkit-appearance: scrollbarthumb-vertical; }` <div>Lorem</div>	Firefox
`scrollbartrack-horizontal`	`div { color: black; -moz-appearance: scrollbartrack-horizontal; -webkit-appearance: scrollbartrack-horizontal; }` <div>Lorem</div>	Firefox
`scrollbartrack-vertical`	`div { color: black; -moz-appearance: scrollbartrack-vertical; -webkit-appearance: scrollbarbartrack-vertical; }` <div>Lorem</div>	Firefox
`searchfield-decoration`	`div{ color: black; -moz-appearance: searchfield-decoration; -webkit-appearance: searchfield-decoration; }` `<div>Lorem</div>`	Safari Edge
`searchfield-results-decoration`	`div{ color: black; -moz-appearance: searchfield-results-decoration; -webkit-appearance: searchfield-results-decoration; }` `<div>Lorem</div>`	Chrome Safari Edge	(Works on Chrome 51 on Windows 7)
`searchfield-results-button`	`div{ color: black; -moz-appearance: searchfield-results-button; -webkit-appearance: searchfield-results-button; }` `<div>Lorem</div>`	Safari Edge
`searchfield-cancel-button`	`div{ color: black; -webkit-appearance: searchfield-cancel-button; }` `<div>Lorem</div>`	Chrome Safari Edge
`snapshotted-plugin-overlay`	`div{ color: black; -moz-appearance: snapshotted-plugin-overlay; -webkit-appearance: snapshotted-plugin-overlay; }` `<div>Lorem</div>`	Safari
`sheet`	`div { color: black; -moz-appearance: sheet; -webkit-appearance: sheet; }` `<div>Lorem</div>`	None
`slider-vertical`	`div{ color: black; -webkit-appearance: slider-vertical; }` `<div>Lorem</div>`	Chrome Safari Edge
`sliderthumb-horizontal`	`div{ color: black; -webkit-appearance: slider-thumb-horizontal; }` `<div>Lorem</div>`	Chrome Safari Edge
`sliderthumb-vertical`	`div{ color: black; -webkit-appearance: slider-thumb-vertical; }` `<div>Lorem</div>`	Chrome Safari Edge
`textfield-multiline`	`div { color: black; -moz-appearance: textfield-multiline; -webkit-appearance: textfield-multiline; }` `<div>Lorem</div>`	Firefox	Use `textarea` instead.
`-apple-pay-button`	`div{ color: black; -webkit-appearance: -apple-pay-button; }` `<div>Lorem</div>`	Safari	iOS and macOS only. Available on the web starting in iOS 10.1 and macOS 10.12.1

Obsolete values

The following values were at some point implemented for a prefixed property, but are no longer supported.

Value	Browser	Description
`button-arrow-down`	Firefox	Removed in Firefox 64
`button-arrow-next`	Firefox	Removed in Firefox 64
`button-arrow-previous`	Firefox	Removed in Firefox 64
`button-arrow-up`	Firefox	Removed in Firefox 64
`button-focus`	Firefox	Removed in Firefox 64
`dualbutton`	Firefox	Removed in Firefox 64
`groupbox`	Firefox	Removed in Firefox 64
`menuarrow`	Firefox	Removed in Firefox 64
`menubar`	Firefox	Removed in Firefox 64
`menucheckbox`	Firefox	Removed in Firefox 64
`menuimage`	Firefox	Removed in Firefox 64
`menuitem`	Firefox	Removed in Firefox 64.
`menuitemtext`	Firefox	Removed in Firefox 64
`menupopup`	Firefox	Removed in Firefox 64
`menuradio`	Firefox	Removed in Firefox 64
`menuseparator`	Firefox	Removed in Firefox 64
`meterchunk`	Firefox	Removed in Firefox 64.
`progresschunk`	Firefox	Removed in Firefox 64.
`progresschunk-vertical`	Firefox	Removed in Firefox 64.
`radio-container`	Firefox	Removed in Firefox 64.
`radio-label`	Firefox	Removed in Firefox 64.
`radiomenuitem`	Firefox	Removed in Firefox 64.
`resizer`	Firefox	Removed in Firefox 63
`resizerpanel`	Firefox	Removed in Firefox 63.
`scrollbarbutton-down`	Firefox	Removed in Firefox 63.
`scrollbarbutton-left`	Firefox	Removed in Firefox 63.
`scrollbarbutton-right`	Firefox	Removed in Firefox 63.
`scrollbarbutton-up`	Firefox	Removed in Firefox 63.
`separator`	Firefox	Removed in Firefox 64.
`spinner`	Firefox	Removed in Firefox 64.
`spinner-downbutton`	Firefox	Removed in Firefox 64.
`spinner-textfield`	Firefox	Removed in Firefox 64.
`spinner-upbutton`	Firefox	Removed in Firefox 64.
`splitter`	Firefox	Removed in Firefox 64.
`statusbar`	Firefox	Removed in Firefox 64.
`statusbarpanel`	Firefox	Removed in Firefox 64.
`tab`	Firefox	Removed in Firefox 64
`tabpanel`	Firefox	Removed in Firefox 64.
`tabpanels`	Firefox	Removed in Firefox 64
`tab-scroll-arrow-back`	Firefox	Removed in Firefox 64.
`tab-scroll-arrow-forward`	Firefox	Removed in Firefox 64.
`toolbar`	Firefox	Removed in Firefox 64.
`toolbarbutton`	Firefox	Removed in Firefox 64.
`toolbarbutton-dropdown`	Firefox	Removed in Firefox 64.
`toolbargripper`	Firefox	Removed in Firefox 64.
`toolbox`	Firefox	Removed in Firefox 64.
`tooltip`	Firefox	Removed in Firefox 64.
`treeheader`	Firefox	Removed in Firefox 64.
`treeheadercell`	Firefox	Removed in Firefox 64.
`treeheadersortarrow`	Firefox	Removed in Firefox 64.
`treeitem`	Firefox	Removed in Firefox 64.
`treeline`	Firefox	Removed in Firefox 64.
`treetwisty`	Firefox	Removed in Firefox 64.
`treetwistyopen`	Firefox	Removed in Firefox 64.
`treeview`	Firefox	Removed in Firefox 64.
`-moz-win-borderless-glass`	Firefox	Removed in Firefox 64.
`-moz-win-browsertabbar-toolbox`	Firefox	Removed in Firefox 64.
`-moz-win-communicationstext`	Firefox	Removed in Firefox 64.
`-moz-win-communications-toolbox`	Firefox	Removed in Firefox 64.
`-moz-win-exclude-glass`	Firefox	Removed in Firefox 64.
`-moz-win-glass`	Firefox	Removed in Firefox 64.
`-moz-win-media-toolbox`	Firefox	Removed in Firefox 64.
`-moz-window-button-box`	Firefox	Removed in Firefox 64.
`-moz-window-button-box-maximized`	Firefox	Removed in Firefox 64.
`-moz-window-button-close`	Firefox	Removed in Firefox 64.
`-moz-window-button-maximize`	Firefox	Removed in Firefox 64.
`-moz-window-button-minimize`	Firefox	Removed in Firefox 64.
`-moz-window-button-restore`	Firefox	Removed in Firefox 64.
`-moz-window-frame-bottom`	Firefox	Removed in Firefox 64.
`-moz-window-frame-left`	Firefox	Removed in Firefox 64.
`-moz-window-frame-right`	Firefox	Removed in Firefox 64.
`-moz-window-titlebar`	Firefox	Removed in Firefox 64.
`-moz-window-titlebar-maximized`	Firefox	Removed in Firefox 64.

Formal definition

Initial value	`auto`
Applies to	all elements
Inherited	no
Computed value	as specified
Animation type	discrete

Formal syntax

none | auto | textfield | menulist-button | <compat-auto>where 
<compat-auto> = searchfield | textarea | push-button | slider-horizontal | checkbox | radio | square-button | menulist | listbox | meter | progress-bar | button

Examples

Make an element look like a menulist button

.exampleone {
  appearance: menulist-button;
}

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

Specifications

Specification	Status	Comment
CSS Basic User Interface Module Level 4 The definition of 'appearance' in that specification.	Working Draft	Initial definition.

Browser compatibility

BCD tables only load in the browser

appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets 编辑

Syntax

Values

Standard keywords

Non-standard keywords

Obsolete values

Formal definition

Formal syntax

Examples

Make an element look like a menulist button

Specifications

Browser compatibility

See also

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

词条统计

友情链接

appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets 编辑

Standard keywords

Non-standard keywords

Obsolete values

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

词条统计

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。