appearance

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              |
  <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 的定义