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