appearance

试一试

appearance: auto;

appearance: none;

appearance: textfield;

<section id="default-example">
  <div class="background" id="example-element">
    <input type="search" value="search" aria-label="unlabeled search" />
    <input type="checkbox" aria-label="unlabeled checkbox" />
    <input type="radio" aria-label="unlabeled radio button" />
    <button>Button</button>
  </div>
</section>

input,
button {
  appearance: inherit;
}

语法

/* CSS Basic User Interface Module Level 4 values */
appearance: none;
appearance: auto;
appearance: menulist-button;
appearance: textfield;
appearance: base-select;

/* Global values */
appearance: inherit;
appearance: initial;
appearance: revert;
appearance: revert-layer;
appearance: unset;

/* <compat-auto> values have the same effect as 'auto' */
appearance: button;
appearance: checkbox;

值

appearance 属性可以应用于所有元素和伪元素，但指定值（如果有）的效果取决于它所应用的元素。

none

使小部件具有原始外观，使其可以通过 CSS 进行样式设置，同时保持小部件的本机功能。此值不影响非小部件。

auto

将交互式小部件设置为以其操作系统原生外观渲染。对于没有操作系统原生样式的元素，其行为类似于 none。

base-select

仅与 <select> 元素和 ::picker(select) 伪元素相关，允许对其进行样式设置。

<compat-special>

在某些元素上具有类似于 auto 的效果。

textfield

使某些 <input> 类型的外观与 text 类型的外观匹配。

menulist-button

当设置在 <select> 元素上时，下拉选择器的样式与其默认状态匹配。

<compat-auto>

为了向后兼容而包含；可能的值包括 button、checkbox、listbox、menulist、meter、progress-bar、push-button、radio、searchfield、slider-horizontal、square-button 和 textarea。所有值的行为都类似于 auto：请改用 auto。

非标准值

某些浏览器还支持一些非标准值

slider-vertical

当应用于 <input type="range"> 元素时，使滑块垂直。要创建垂直滑块，您应该将 writing-mode 设置为 vertical-lr，并将 direction 设置为 rtl。

-apple-pay-button

当设置在类型为 button 或 reset 的 <button>、<a> 或 <input> 元素上时，显示 Apple Pay 标志。

描述

appearance 属性能够根据操作系统的原生主题以其操作系统原生样式显示元素，以及通过 none 值移除任何平台原生样式。设置 appearance: none 或以其他方式更改 UI 小部件的外观不会更改元素的功能。

虽然文档中的大多数元素都可以通过 CSS 完全样式化，但 UI 控件（小部件）通常由浏览器使用操作系统的原生 UI 样式进行渲染。这种原生外观在不同的操作系统和浏览器之间有所不同。在这种默认状态下，小部件通过 CSS 进行样式化的功能有限（如果有的话）。哪些元素具有这种原生 UI 外观在 HTML 中定义。

appearance 属性提供了一些对 HTML 小部件外观的控制，这些小部件默认看起来像原生操作系统控件。最值得注意的是，none 值会抑制小部件的某些原生外观。这会产生一种原始外观，可以通过 CSS 进行样式设置，同时仍保持功能并支持原生用户交互。

当设置为 appearance: none 时，一些小部件会完全消失。然而，隐藏的控件仍然是交互式的。例如，单击与 appearance: none 复选框关联的 <label> 会切换复选框的选中状态。

由于 none 可能会导致小部件被隐藏，因此正在添加 base 值以提供具有基本外观的小部件。当支持时，base 值将确保小部件保持其原生外观，同时允许使用 CSS 更改小部件默认不可更改的样式。与 none 不同，none 会使单选按钮和复选框消失，base 会赋予小部件一个具有默认原生样式的原始外观，这些样式可用且可互操作，并且可以通过 CSS 进行高度自定义。虽然此 base 值尚未支持，但许多 <compat-auto> 值提供了类似的功能，但它们是类型特定的而不是全局的。

base-select 值仅与 <select> 元素和 ::picker(select) 伪元素相关，它支持样式化 <select> 元素和选择器（其中包含 <option> 元素）。选择器在顶层渲染，类似于弹出框。当设置 base-select 时，选择器可以使用 CSS 锚点定位功能相对于 select（或其他元素）进行定位。此外，base-select 值会导致 <select> 不在浏览器窗格之外渲染或触发内置移动操作系统组件。它也不再根据最宽的 <option> 的宽度进行尺寸调整。

带前缀的非标准值

在标准化之前，带前缀的 -moz-appearance 和 -webkit-appearance 属性允许元素显示为按钮或复选框等小部件。在旧版样式表中可能会遇到以下非标准值，最常见的是作为 Shadow DOM 组件带前缀的伪元素的值。

鼓励作者只使用标准关键字。

正式定义

正式语法

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

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

<compat-special> = 
  textfield        |
  menulist-button  

示例

基本示例

此示例演示了 appearance 属性的基本用法，在某些浏览器中更改 <input> 元素的外观。

HTML

我们包含两个 number 表单控件及其标签。

<p>
  <label>Enter a number: <input type="number" min="0" max="10" /></label>
</p>
<p>
  <label
    >Enter a number: <input type="number" min="0" max="10" class="text"
  /></label>
</p>

CSS

我们将类名为 text 的元素设置为看起来像一个文本字段。

.text {
  appearance: textfield;
}

结果

根据浏览器，当控件设置为文本字段时，微调器可能会在视觉上被移除。appearance 属性对功能没有影响：例如，虽然可能不再有微调器可点击，但向上和向下光标键仍会增加和减少值。

外观设置为 none

以下示例展示了如何从复选框、单选按钮和 <select> 元素中移除默认样式，并应用自定义样式。

HTML

我们包含成对的复选框、单选按钮和 <select> 元素，以及它们关联的标签

<label><input type="checkbox" /> Default unchecked </label>
<label><input type="checkbox" checked /> Default checked </label>

<hr />

<label><input type="radio" name="radio" /> Default unchecked </label>
<label><input type="radio" name="radio" checked /> Default checked </label>

<hr />

<label
  >Unstyled select
  <select>
    <option>Option 1</option>
    <option>Option 2</option>
  </select>
</label>

<label
  >Styled select
  <select class="none">
    <option>Option 1</option>
    <option>Option 2</option>
  </select>
</label>

CSS

label {
  display: block;
  margin: 0.5em 0;
}

我们对所有类型为 checkbox 的 <input> 元素应用样式；如果元素可样式化，这些样式会创建一个红色方块。我们将所有输入（checkbox 和 radio）的 :checked UI 状态以及带有 .none 类的元素设置为 appearance: none。这会移除单选按钮和复选框的所有样式，除了边距，并允许应用任何设置的样式。当设置 none 时，没有为单选按钮或 <select> 元素提供替代样式。

[type="checkbox"] {
  width: 1em;
  height: 1em;
  display: inline-block;
  background: red;
}
input:checked,
.none {
  appearance: none;
}

结果

设置 appearance: none 可以对 UI 元素进行样式设置，但也有隐藏小部件的风险。未选中的复选框，其 appearance 默认为 auto，看起来像一个复选框。在 :checked 状态下设置 appearance: none 可以对其进行样式设置。

与未选中的复选框一样，未选中的单选按钮看起来像原生 UI 小部件，因为它就是。当处于选中状态时，应用 appearance: none 后，单选按钮会消失；其功能得以保留，只有其边距会影响页面渲染。

设置 select 的外观

我们可以使用 appearance 属性选择自定义选择功能，从而能够样式化 <select> 元素及其选择器，选择器表示从页面弹出的表单控件部分。

HTML

我们包含三个 <select> 元素，它们具有相同的多个 <option> 子元素。与每个 <select> 一样，我们还包含关联的 <label> 元素。第三个选项有更多文本，以演示 base-select 对 <select> 宽度的影响

<label for="ice-cream1"
  >Default flavor:
  <select id="ice-cream1">
    <option>Asparagus</option>
    <option>Dulce de leche</option>
    <option>Pistachio, rum raisin, and coffee</option>
  </select>
</label>
<label for="ice-cream2"
  >Base select flavor:
  <select id="ice-cream2" class="baseSelect">
    <option>Asparagus</option>
    <option>Dulce de leche</option>
    <option>Pistachio, rum raisin, and coffee</option>
  </select>
</label>
<label for="ice-cream3"
  >Menulist button flavor:
  <select id="ice-cream3" class="menulistButton">
    <option>Asparagus</option>
    <option>Dulce de leche</option>
    <option>Pistachio, rum raisin, and coffee</option>
  </select>
</label>

CSS

我们使用带有 select 参数的 ::picker() 伪元素选择所有 <select> 元素的拾取器。我们将所有拾取器和一个 <select> 元素的 appearance 值设置为 base-select。我们将最后一个 <select> 设置为 menulist-button。第一个 <select> 默认为 auto 状态

.baseSelect,
::picker(select) {
  appearance: base-select;
}
.menulistButton {
  appearance: menulist-button;
}

label {
  display: block;
}

我们为 <select> 和拾取器的 background-color 和 border 属性设置值，以演示 appearance 值的影响

select {
  border: 1px solid red;
  background-color: orange;
}

::picker(select) {
  background-color: yellow;
  border: none;
}

结果

虽然 background-color 和 border 样式在所有 <select> 元素及其拾取器上定义，但 ::picker(select) 样式仅在 select 和 picker 都将 appearance 属性设置为 base-select 时才影响拾取器。第一个和第三个 select 看起来相同，因为 menulist-button 是一个兼容性关键字。

请注意，默认情况下，<select> 的行内尺寸通常是文本最多的 <option> 的行内尺寸，并且下拉选择器在打开时会出现在渲染页面的顶部，使其不受周围页面的限制，因此完全可见。当设置 base-select 时，这些说法不再成立。

规范

浏览器兼容性

另见

• prefers-color-scheme