就业培训     下载中心     Wiki     联络
登录   注册
  1. 首页
  2. CSS
  3. appearance (-moz-appearance, -webkit-appearance)

在此页

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 source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

-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.

句法 

/* 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;

值

Standard keywords

Value Demo Browser 描述
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 特性。

Value Demo Browser 描述
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 使用 meter 代替。
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 使用 textarea 代替。
-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 描述
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.

形式定义

初始值 auto
适用于 所有元素
继承 no
计算值 如指定
动画类型 discrete

形式句法 

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

范例

Make an element look like a menulist button 

.exampleone {
  appearance: menulist-button;
}

另请参阅 this JSFiddle for an example showing how you might use appearance: none to apply custom styling to radio buttons and checkboxes.

规范

规范 状态 注释
CSS Basic User Interface Module Level 4
The definition of 'appearance' in that specification. 		工作草案 初始定义。

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
appearance Chrome 完整支持 84
完整支持 84
部分支持 1 Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge 完整支持 84
完整支持 84
部分支持 12 Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox 完整支持 80
完整支持 80
部分支持 1 Prefixed
Prefixed Implemented with the vendor prefix: -moz-
部分支持 64 Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
部分支持
Prefixed Implemented with the vendor prefix: -webkit-
Disabled ). To change preferences in Firefox, visit about:config.
IE 不支持 No Opera 完整支持 70
完整支持 70
部分支持 15 Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari 部分支持 3 Prefixed
部分支持 3 Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
WebView Android 完整支持 84
完整支持 84
部分支持 1 Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android 完整支持 84
完整支持 84
部分支持 18 Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Android 完整支持 80
完整支持 80
部分支持 4 Prefixed
Prefixed Implemented with the vendor prefix: -moz-
部分支持 64 Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
部分支持
Prefixed Implemented with the vendor prefix: -webkit-
Disabled ). To change preferences in Firefox, visit about:config.
Opera Android 完整支持 60
完整支持 60
部分支持 14 Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari iOS 部分支持 1 Prefixed
部分支持 1 Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Samsung Internet Android 部分支持 1.0 Prefixed
部分支持 1.0 Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
auto Chrome 完整支持 83 Edge 完整支持 83 Firefox 完整支持 80 IE 不支持 No Opera 完整支持 69 Safari 不支持 No WebView Android 完整支持 83 Chrome Android 完整支持 83 Firefox Android 完整支持 80 Opera Android 完整支持 59 Safari iOS 不支持 No Samsung Internet Android 完整支持 13.0
<compat-auto> (compatibility values searchfield , textarea , push-button , slider-horizontal , checkbox , radio , square-button , menulist , listbox , meter , progress-bar , button ) Chrome 完整支持 83
完整支持 83
部分支持 1
Edge 完整支持 83
完整支持 83
部分支持 12
Firefox 完整支持 80
完整支持 80
部分支持 1
IE 不支持 No Opera 完整支持 69
完整支持 69
部分支持 15
Safari 部分支持 3 WebView Android 完整支持 83
完整支持 83
部分支持 1
Chrome Android 完整支持 83
完整支持 83
部分支持 18
Firefox Android 完整支持 80
完整支持 80
部分支持 4
Opera Android 完整支持 59
完整支持 59
部分支持 14
Safari iOS 部分支持 1 Samsung Internet Android 部分支持 1.0
menulist-button Chrome 完整支持 83
完整支持 83
部分支持 1
Edge 完整支持 83
完整支持 83
部分支持 12
Firefox 完整支持 80
完整支持 80
部分支持 1 注意事项
注意事项 见 bug 1481615 .
IE 不支持 No Opera 完整支持 69
完整支持 69
部分支持 15
Safari 部分支持 3 WebView Android 完整支持 83
完整支持 83
部分支持 1
Chrome Android 完整支持 83
完整支持 83
部分支持 18
Firefox Android 完整支持 80
完整支持 80
部分支持 4 注意事项
注意事项 见 bug 1481615 .
Opera Android 完整支持 59
完整支持 59
部分支持 14
Safari iOS 部分支持 1 Samsung Internet Android 部分支持 1.0
none Chrome 完整支持 1 Edge 完整支持 12 Firefox 完整支持 54
完整支持 54
部分支持 1 注意事项
注意事项 Doesn't work with <input type="checkbox"> and <input type="radio"> .
IE 不支持 No Opera 完整支持 15 Safari 完整支持 3 WebView Android 完整支持 1 Chrome Android 完整支持 18 Firefox Android 完整支持 54
完整支持 54
部分支持 4 注意事项
注意事项 Doesn't work with <input type="checkbox"> and <input type="radio"> .
Opera Android 完整支持 14 Safari iOS 完整支持 3 Samsung Internet Android 完整支持 1.0
textfield Chrome 完整支持 83
完整支持 83
部分支持 1
Edge 完整支持 83
完整支持 83
部分支持 12
Firefox 完整支持 80
完整支持 80
部分支持 1
IE 不支持 No Opera 完整支持 69
完整支持 69
部分支持 15
Safari 部分支持 3 WebView Android 完整支持 83
完整支持 83
部分支持 1
Chrome Android 完整支持 83
完整支持 83
部分支持 18
Firefox Android 完整支持 80
完整支持 80
部分支持 4
Opera Android 完整支持 59
完整支持 59
部分支持 14
Safari iOS 部分支持 1 Samsung Internet Android 部分支持 1.0

图例

完整支持

完整支持

部分支持

部分支持

不支持

不支持

见实现注意事项。

见实现注意事项。

用户必须明确启用此特征。

用户必须明确启用此特征。

要求使用供应商前缀或不同名称。

要求使用供应商前缀或不同名称。

另请参阅

元数据

  • 最后修改：
  1. CSS
  2. CSS 参考
  3. CSS Basic User Interface
  4. 指南
    1. Using URL values for the cursor property
  5. 特性
    1. appearance (-moz-appearance, -webkit-appearance)
    2. aspect-ratio
    3. box-sizing
    4. caret-color
    5. cursor
    6. ime-mode
    7. outline
    8. outline-color
    9. outline-offset
    10. outline-style
    11. outline-width
    12. resize
    13. text-overflow
    14. user-select

Copyright  © 2014-2026 乐数软件    

工业和信息化部： 粤ICP备14079481号-1