<select> 元素現在可使用 CSS 自訂

Adam Argyle

發布日期：2025 年 3 月 24 日

從 Chrome 135 開始，網頁開發人員和設計人員終於可以將網路上的 <select> 元素整合為可存取、標準化且可使用 CSS 樣式的元素。這項工作歷經多年的開發，工程師和合作夥伴花費許多時間共同完成規格作業，最終成果是功能強大且內容豐富的元件，不會在舊版瀏覽器中發生錯誤。

以下是使用這些新功能製作自訂精選內容的影片：

展示Una、Brecht 和 Adam 的示範影片。

如果您密切關注這項計畫，會發現自 Una 要求社群提供意見以來，部分規格名稱和功能已有所變更。幸運的是，如果您是根據該篇文章進行操作，且想瞭解有哪些變更，Una 也能提供相關資訊。

此外，MDN 上還有全新的可自訂選取項目說明文件，內含詳細資訊。

與 appearance: base-select 會面

新的 CSS 屬性 appearance: base-select 可將 <select> 元素置於新的可設定及樣式化的狀態，通常稱為「base」樣式：

.custom-select {
  &, &::picker(select) {
    appearance: base-select;    
  }
}

使用 base-select 可解鎖多項新功能和行為：

使用 base-select 會失去部分功能和行為：

  • <select> 不會在瀏覽器窗格外顯示。
  • 不會觸發內建的行動作業系統元件。
  • <select> 會停止採用最長 <option> 的寬度。

<select> 現在可納入豐富的 HTML 內容

在您自訂 <select> 之前，如果將圖片或 SVG 等內容放入 <option> 元素，瀏覽器會忽略這些內容。

請考慮下列 HTML，瀏覽器會在您撰寫時讀取：

<select class="custom-select">
  <option>
    <svg aria-hidden>…</svg>
    <span>HTML</span>
  </option>
  <option>
    <svg aria-hidden>…</svg>
    <span>CSS</span>
  </option>
  <option>
    <svg aria-hidden>…</svg>
    <span>JavaScript</span>
  </option>
  <option>
    <svg aria-hidden>…</svg>
    <span>WASM</span>
  </option>
</select>

不過，使用的 DOM 不會包含 <svg>：

<select class="custom-select">
  <option>
    <span>HTML</span>
  </option>
  <option>
    <span>CSS</span>
  </option>
  <option>
    <span>JavaScript</span>
  </option>
  <option>
    <span>WASM</span>
  </option>
</select>

以下是 (由左至右) Chrome、Safari 和 Firefox 轉譯上述 HTML 的畫面。如果瀏覽器支援 appearance: base-select，則選項中會顯示 SVG，否則不會顯示。

Chrome、Safari 和 Firefox 顯示的選取項目，其中包含 SVG。Chrome 會顯示圖片，Safari 和 Firefox 則會呈現沒有圖片的畫面。
請在這個 Codepen 中試試看。

由於剖析器有所變更，因此使用自訂選單的現有網站可能會發生故障。Chrome 提供 Finch 實驗的後台功能，以便在緊急情況下關閉實驗。如果一切順利，實驗就會結束，且程式碼會永久納入原始碼。

可完全自訂

base-select 的每個部分都可以替換、自訂和製作動畫。以下是使用所有新功能建立可辨識且有意義的選取體驗的示範。

四種選取元素的不同呈現方式。第一個有綠色狀態指標點，並標示為「開啟」。下一個畫面會顯示選項旁的顯示圖片。第三個是色彩空間挑選器，其中內建了自訂標籤。最後一個選項可讓您選擇草稿或已發布狀態。
在這個 Codepen 中試試看。

請參閱這篇文章結尾的資源部分，查看更多範例。

未變更的 JavaScript 介面

您現有的 JavaScript 與 <select> 元素互動不會有任何風險。

不過，如果您開始在 <option> 元素中加入富 HTML，則應測試所選值，因為瀏覽器仍會剖析及忽略圖片和 SVG。不過，決定所選內容字串的邏輯已有所變更，而且視選項而定，您可能需要進行調整。

如果您在 <option> 上使用 value 屬性，就不必擔心。

資源

Chrome 是第一個實作 base-select 的瀏覽器，但每個瀏覽器都參與了規格制定，還有更多「基本」元素尚待完成。這只是一個開端。

敬請期待，我們會持續新增有關自訂特定元素的指引、範例和資源。在此之前，請參閱下列連結瞭解詳情。

特別感謝所有參與這項計畫的人員！