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	仅适用于 iOS 和 macOS。从 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

参见

关于 CSS 基本用户界面模块 Level 4 的 appearance 的定义