appearance

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

appearance CSS 属性用于控制 UI 控件的基于操作系统主题的原生外观。

尝试一下

在标准化之前,这个属性允许将简单的元素显示为控件,例如按钮或复选框。这被认为是一个缺陷,现在鼓励开发者仅使用标准关键字。

备注:如果你想在网站上使用此属性,应非常谨慎地进行测试。虽然它在大多数现代浏览器中得到支持,但实现方式不同。在旧的浏览器中,即使是关键字 none 对于不同浏览器中的所有表单元素也没有相同的效果,有些浏览器甚至不支持它。在最新的浏览器中差异较小。

语法

css
/* CSS 基本用户界面模块 Level 4 支持的值 */
appearance: none;
appearance: auto;
appearance: menulist-button;
appearance: textfield;

/* "compat-auto" 值与 "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;

/* Gecko 中可用的部分值列表 */
-moz-appearance: scrollbarbutton-up;
-moz-appearance: button-bevel;

/* WebKit/Blink(以及 Gecko 和 Edge)中可用的部分值列表 */
-webkit-appearance: media-mute-button;
-webkit-appearance: caret;

/* 全局值 */
appearance: inherit;
appearance: initial;
appearance: revert;
appearance: revert-layer;
appearance: unset;

标准关键字

浏览器 描述
none Firefox Chrome Safari Edge 隐藏部件的某些特性,例如 select 元素中显示的指示列表可以展开的箭头。
auto Firefox Chrome Edge 用户代理根据元素选择适当的特殊样式。对于没有特殊样式的元素,其行为类似于 none
menulist-button Firefox Chrome Safari Edge
textfield Firefox Chrome Safari Edge
以下值被视为等同于 auto
button Firefox Chrome Safari Edge 该元素曾经被绘制为一个按钮。
checkbox Firefox Chrome Safari Edge 该元素曾经被绘制为一个复选框,包括实际的“复选框”部分。
listbox Firefox Chrome Safari Edge
menulist Firefox Chrome Safari Edge
meter Chrome Safari Firefox
progress-bar Chrome Safari Firefox
push-button Chrome Safari Edge
radio Firefox Chrome Safari Edge 该元素曾经被绘制为单选按钮,包括实际的“单选按钮”部分。
searchfield Firefox Chrome Safari Edge
slider-horizontal Chrome Safari Edge
square-button Chrome Safari Edge
textarea Firefox Chrome Safari Edge

非标准关键字

以下值可能适用于历史浏览器版本,使用 -moz-appearance-webkit-appearance 前缀,但不适用于标准的 appearance 属性。

浏览器 描述
attachment Safari
borderless-attachment Safari
button-bevel Firefox Chrome Safari Edge
caps-lock-indicator Safari Edge
caret Firefox Chrome Safari Edge
checkbox-container Firefox 该元素的外观类似于复选框的容器,可能包括在某些平台下的光照预设背景效果。通常它会包含一个标签和一个复选框。
checkbox-label Firefox
checkmenuitem Firefox
color-well Safari input type=color
continuous-capacity-level-indicator Safari
default-button Safari Edge
discrete-capacity-level-indicator Safari
inner-spin-button Firefox Chrome Safari
image-controls-button Safari
list-button Safari datalist
listitem Firefox Chrome Safari Edge
media-enter-fullscreen-button Chrome Safari
media-exit-fullscreen-button Chrome Safari
media-fullscreen-volume-slider Safari
media-fullscreen-volume-slider-thumb Safari
media-mute-button Chrome Safari Edge
media-play-button Chrome Safari Edge
media-overlay-play-button Chrome Safari
media-return-to-realtime-button Safari
media-rewind-button Safari
media-seek-back-button Safari Edge
media-seek-forward-button Safari Edge
media-toggle-closed-captions-button Chrome Safari
media-slider Chrome Safari Edge
media-sliderthumb Chrome Safari Edge
media-volume-slider-container Chrome Safari
media-volume-slider-mute-button Safari
media-volume-slider Chrome Safari
media-volume-sliderthumb Chrome Safari
media-controls-background Chrome Safari
media-controls-dark-bar-background Safari
media-controls-fullscreen-background Chrome Safari
media-controls-light-bar-background Safari
media-current-time-display Chrome Safari
media-time-remaining-display Chrome Safari
menulist-text Firefox Chrome Safari Edge
menulist-textfield Firefox Chrome Safari Edge 该元素被样式化为下拉列表的文本字段。(未在 Windows 平台上实现)
meterbar Firefox 使用 meter 来代替。
number-input Firefox
progress-bar-value Chrome Safari
progressbar Firefox 该元素的样式类似于进度条。可以使用 progress-bar 样式来实现
progressbar-vertical Firefox
range Firefox
range-thumb Firefox
rating-level-indicator Safari
relevancy-level-indicator Safari
scale-horizontal Firefox
scalethumbend Firefox
scalethumb-horizontal Firefox
scalethumbstart Firefox
scalethumbtick Firefox
scalethumb-vertical Firefox
scale-vertical Firefox
scrollbarthumb-horizontal Firefox
scrollbarthumb-vertical Firefox
scrollbartrack-horizontal Firefox
scrollbartrack-vertical Firefox
searchfield-decoration Safari Edge
searchfield-results-decoration Chrome Safari Edge 可以在 Windows 7 上的 Chrome 51 上使用。
searchfield-results-button Safari Edge
searchfield-cancel-button Chrome Safari Edge
snapshotted-plugin-overlay Safari
sheet
slider-vertical Chrome Safari Edge
sliderthumb-horizontal Chrome Safari Edge
sliderthumb-vertical Chrome Safari Edge
textfield-multiline Firefox 使用 textarea 代替。
-apple-pay-button Safari 仅适用于 iOSmacOS。从 iOS 10.1 和 macOS 10.12 开始,在 Web 上可用。

形式定义

初始值none
适用元素所有元素
是否是继承属性
计算值as specified
动画类型离散值

形式语法

appearance = 
none |
auto |
base |
<compat-auto> |
<compat-special>

<compat-auto> =
searchfield |
textarea |
checkbox |
radio |
menulist |
listbox |
meter |
progress-bar |
button

<compat-special> =
textfield |
menulist-button

示例

使一个元素看起来像一个下拉列表按钮

css
.exampleone {
  -webkit-appearance: menulist-button;
  -moz-appearance: menulist-button;
  appearance: menulist-button;
}

应用自定义样式

HTML

html
<select class="none">
  <option>appearance: none</option>
</select>
<select class="auto">
  <option>appearance: auto</option>
</select>

CSS

css
.none {
  appearance: none;
}
.auto {
  appearance: auto;
}

结果

规范

Specification
CSS Basic User Interface Module Level 4
# appearance-switching

浏览器兼容性

BCD tables only load in the browser

参见