外观

在标准化之前，此属性允许将元素显示为小部件，例如按钮或复选框。这被认为是一个错误的功能，现在鼓励作者仅使用标准关键字。

对于以下关键字，用户代理会根据元素选择合适的样式。提供了一些示例，但列表并不详尽。

none

隐藏小部件的某些功能，例如在选择元素中显示的箭头，指示列表可以展开。

auto

在没有特殊样式的元素上充当 none。

<compat-special>

menulist-button 或 textfield 之一。这两个值在没有特殊样式的元素上等效于 auto。

<compat-auto>

可能的值为 button、checkbox、listbox、menulist、meter、progress-bar、push-button、radio、searchfield、slider-horizontal、square-button 和 textarea。等效于 auto 的关键字，用于保持与旧版浏览器的兼容性。

非标准值

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

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

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

<compat-special> = 
  textfield        |
  menulist-button  

以下示例展示了如何移除复选框和选择元素的默认样式，并应用自定义样式。复选框的外观更改为圆形，选择元素展示了如何移除指示列表可以展开的箭头。

HTML

<input type="checkbox" />
<input type="checkbox" checked />

<select>
  <option>default</option>
  <option>option 2</option>
</select>
<select class="none">
  <option>appearance: none</option>
  <option>option 2</option>
</select>

CSS

input {
  appearance: none;
  width: 1em;
  height: 1em;
  display: inline-block;
  background: red;
}
input:checked {
  border-radius: 50%;
  background: green;
}

select {
  border: 1px solid black;
  font-size: 1em;
}

select.none {
  appearance: none;
}

结果

• 首选颜色方案