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

Adam Argyle

發布日期：2025 年 3 月 24 日

從 Chrome 135 開始，網頁開發人員和設計師終於可以在網頁上，使用可存取、標準化且可設定 CSS 樣式的 <select> 元素。這項功能歷經多年開發，耗費無數工程師的心血，並經過協作規格作業，最終打造出功能強大且豐富的元件，不會在舊版瀏覽器中發生錯誤。

以下影片展示如何使用這些新功能自訂精選內容：

由 Una、Brecht 和 Adam 進行示範。

如果您密切關注這項計畫，會發現自 Una徵求社群意見以來，有幾個規格名稱和功能已變更。幸好，如果您是根據該貼文工作，且想瞭解變更內容，Una 也為您準備了相關資訊。

此外，MDN 上也提供可自訂選取內容的全新說明文件，內容十分詳盡。

認識 appearance: base-select

新的 CSS 屬性 appearance: base-select，可將 <select> 元素設為可設定樣式的新狀態，一般稱為「基本」樣式：

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

使用 base-select unlocks 可啟用多項新功能和行為：

使用 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 的瀏覽器，但所有瀏覽器都參與了規格制定，而且還有更多「基本」元素尚未完成。這只是第一步。

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

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