可自訂的 Select：終於能為真正的 <select> 設定樣式

想超越預設的 select 元素，過去總得在兩種糟糕的取捨中擇一：沉重的 JavaScript 函式庫，或大量的 div 元素，而無論哪一種，無障礙設計都變得棘手。¹在 WWDC 2026 上，Safari 團隊指出了一條出路：可自訂的 select——一組 HTML 與 CSS 的新增功能，讓既有的 <select> 元素能完全套用樣式，同時保留它原本就具備的語意、鍵盤導覽與螢幕報讀器支援。從 Safari 27 與 Chrome 135 開始，您可以重新設計按鈕、下拉選單、勾選標記，甚至是箭頭的樣式，然後在 option 中放入圖片、影片或表情符號。¹

TL;DR

• 可自訂的 select 僅以 HTML 與 CSS 就能為真正的 <select> 元素設定樣式，取代開發者過去倚賴的 JavaScript 函式庫與 div 堆疊。此功能自 Safari 27 與 Chrome 135 起提供。¹
• 啟用方式是 appearance: base-select，需套用兩次：一次在 select 本身，以開放按鈕的樣式設定；另一次在 ::picker(select) 上，以退出原生的下拉選單。¹
• 隨附推出的還有新的可設定樣式部位：::picker-icon 透過 content 屬性與 width 重新設計箭頭，option 元素上的 ::checkmark 以相同方式替換勾選標記，而 :open 偽類則在選單開啟時為按鈕設定樣式。¹
• option 可接受任何類型的內容：圖片、影片、表情符號。session 的示範在每個 option 中放入一個 SVG 與一個標籤，然後以 grid-template 與 gap 將整個下拉選單排成 CSS grid。¹
• 將 <button> 放在 <select> 的第一個子元素位置——這在 HTML 中過去並不被允許——可取代內建的按鈕；其中的 <selectedcontent> 元素會顯示所選 option 的豐富內容。²
• 漸進式增強隨附而來：不支援的瀏覽器會回退到原生彈出選單，而語意化的 select 元素在各處都保有其內建的無障礙功能。¹

從 div 泥沼回到語意化 HTML

Safari 工程師 Tim 從 2:48 開始，將 appearance: base-select 套用到一個攝影師作品集的示範上。

這場 session 的論述從 <select> 原本就做得好的地方談起。這個元素開箱即提供基本的無障礙功能：跨 option 元素的鍵盤導覽，以及穩健的螢幕報讀器行為，全都不需要外部函式庫。¹在 Apple 平台上，原生的呈現是大家熟悉的下拉按鈕，而且它與平台上其他每個控制項一致，讓使用者有一套已知的方式來操作它。¹

問題一直出在設計上。把原生控制項放進一個有設計風格的網站，它就顯得格格不入；它就是無法融入。直到現在，解法都意味著徹底放棄這個元素，改用 JavaScript 元件或一堆 div，然後再親手重建無障礙功能。可自訂的 select 保留了這個元素，並把樣式設定交到您手上，分為這場 session 在一個真實攝影師作品集專案上逐步示範的三個階段：按鈕、下拉選單，最後是超越純文字的內容。¹

為按鈕設定樣式：base-select、::picker-icon 與 :open

按鈕是您點按以顯示選單的那部分 select，而第一步是一行宣告：

select {
  appearance: base-select;
}

appearance: base-select 會將原生呈現換成一組您可以修改、較精簡的基礎樣式。¹效果透過繼承立即顯現：示範網站在 body 上設定了 font-family: Gill Sans，於是 select 按鈕現在繼承了 body 的字型，與旁邊的標籤相符。¹從這裡開始，background、border 與 padding 就能像任何其他元素一樣調整。

兩個新的接點完成了按鈕。箭頭有了自己的選擇器 ::picker-icon，它以 content 屬性接受替換的字符，並以 width 設定其大小。:open 偽類則在下拉選單開啟時，為按鈕設定不同的樣式：

select::picker-icon {
  content: "▼"; /* swap in your own glyph */
  width: 1rem;
}

select:open {
  background: #1d1d1f;
  color: #f5f5f7;
}

select:open::picker-icon {
  color: #f5f5f7; /* arrow matches the text color in the open state */
}

這場 session 對結果的評語是：只用幾行 CSS，就有了一個與網站其餘部分相符的 select。¹

為下拉選單設定樣式：::picker(select) 與 ::checkmark

選單本身也帶有可設定樣式的部位。您以 select 元素上的 ::picker(select) 來指定下拉選單本身，以 option 元素上的 ::checkmark 來指定勾選標記。¹退出原生選單需要第二次使用 appearance: base-select，這次是在 picker 上：

select::picker(select) {
  appearance: base-select;
  padding: 0.5rem;
  margin-top: 0.25rem;
  border: 1px solid #d2d2d7;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
}

有了這塊乾淨的畫布，示範以 padding 與 margin 安排間距，接著處理下拉選單上的 border 與 box-shadow。¹要強調目前的選擇，用的是既有的 :checked 選擇器，而非任何新東西：把選中的 option 加粗，其餘的則變灰。¹

option:checked {
  font-weight: bold;
}

option:not(:checked) {
  color: #6e6e73;
}

option::checkmark {
  content: "✓";
  width: 1rem;
}

::checkmark 的運作方式與 ::picker-icon 完全相同：設定 content 與一個 width，預設的勾選標記就會變成任何符合您設計的字符。¹

option 中的豐富內容，以 grid 排版

更大的轉變在於 <option> 裡能放什麼。這場 session 講得很明確：任何類型的內容都行——圖片、影片、表情符號，您喜歡什麼都可以。¹示範為這位攝影師最受歡迎的主題建立了一個分類瀏覽器，每個 option 中都有一個 SVG 符號與一個標籤：

<select>
  <option value="flowers">
    <img src="flowers.svg" alt="">
    Flowers
  </option>
  <!-- more categories -->
</select>

請注意那個空的 alt。Tim 刻意讓圖片的替代文字保持空白，因為否則「Flowers」這個標籤在螢幕報讀器上會被唸出兩次。¹細節雖小，影響卻很實在：豐富的 option 在輔助科技下，依然和純文字的 option 一樣好用。

移除預設的勾選標記後，示範改以 checked 選擇器與顏色變化來凸顯所選的 option。¹還有一個問題：符號加標籤的 option 會讓下拉選單變得很長。解法重複利用了既有的 CSS，因為 picker 現在已是一個普通的樣式設定對象。一套 grid 版面重新塑造了整個選單：

select::picker(select) {
  display: grid;
  grid-template: 1fr 1fr / 1fr 1fr 1fr; /* rows / columns */
  gap: 0.5rem;
}

grid-template 定義列數與欄數，而 gap 定義 grid 儲存格之間的間距，下拉選單便俐落地排成一個井然有序的分類網格。¹這場 session 以同一主題的精彩收尾作結：一個完全用可自訂的 select 打造的放射狀調色盤。¹

可替換的按鈕與 selectedcontent

分類瀏覽器還留有一個缺口：SVG 符號存在於各個 option 中，但顯示目前選擇的按鈕卻只呈現文字。¹可自訂的 select 透過讓您替換內建按鈕來補上這個缺口——將一個 <button> 元素放在 <select> 的第一個子元素位置。把按鈕放進 select 裡，過去在 HTML 中並不被允許；如今它接受自訂內容，例如標籤，或正是為此工作而打造的元素。¹

WebKit 的 Safari 27 beta 公告道出了那個元素的名稱：<selectedcontent>。放在 select 第一個子元素的按鈕內，它會顯示目前所選 option 的內容，並可直接設定樣式。²

<select>
  <button>
    <selectedcontent></selectedcontent>
  </button>
  <option value="everything">
    <img src="everything.svg" alt="">
    Everything
  </option>
  <!-- more categories -->
</select>

這個元素會映現出屬於所選 option 的任何豐富內容，例如示範中「Everything」標籤旁的那個 SVG，於是按鈕終於能呈現出與它所開啟的選單一致的視覺語言。¹²

漸進式增強是內建的

這場 session 的最後一步，正是各團隊一旦忽略便會付出代價的一步：在不支援可自訂的 select 的瀏覽器中檢查設計。答案是最棒的那種乏味。漸進式增強開始發揮作用，控制項保持可用，使用者得到的是原生彈出選單。¹重複利用 select 元素，意味著回退方案早已存在，而由於 <select> 是語意化元素，內建的無障礙功能在每個瀏覽器中都能存活。¹

支援範圍很具體：Safari 27 與 Chrome 135。若想立即試用這些功能，請下載 Safari Technology Preview 或 Safari Beta。¹這場 session 的結尾指引很實用：到 webkit.org 上查看示範，在您自己的網站上為簡單的東西設定樣式，在不支援的瀏覽器中以及搭配輔助工具進行測試，並閱讀 WebKit 的最佳實務資料，好讓介面能為所有人運作。¹

Safari 團隊在 labs 中補充了什麼

WWDC labs 中的幾項內容讓全貌更加完整，尤其是可自訂的 select 接下來的走向。

值得關注的路線圖項目是 appearance: base，也就是把同樣的啟用方式推廣到所有表單控制項，而不僅限於 <select>。這個值存在於 CSS 規格中，但尚未在任何地方推出。³在 lab 上，這個小組表示它「目前不會推出」，會在之後才到位，且規格的討論仍公開地懸而未決——與會者當場對於未套用樣式的基礎究竟該長什麼樣意見相左。⁴所陳述的設計目標倒是夠清楚：盡可能地從頁面樣式繼承、沒有版面上的魔法，以及在各引擎間有一致的基礎呈現與一致的 DOM 結構。⁴

這段歷史解釋了可自訂的 select 為何要重複利用 <select>。最初的提案是一個全新的 <selectmenu> 元素。一位 WebKit 標準工程師推動改為重複利用 <select>，好讓不支援的瀏覽器免費保有原生回退方案——這正是前面提到的漸進式增強的故事。⁴

小組得出了一條硬性規則：請務必在您的 option 中保留文字內容。只有圖示的 option 在不支援的瀏覽器中會呈現一個空白的原生彈出選單，使不支援引擎上的使用者陷入困境。⁴

重點整理

對前端開發者： - 在 select 元素上以 appearance: base-select 啟用按鈕的樣式，並在 ::picker(select) 上再次啟用下拉選單的樣式；接著像處理任何其他元素一樣設定 background、border、padding、間距與 box-shadow。¹ - 以 ::picker-icon 替換箭頭、以 ::checkmark 替換勾選標記，兩者都透過 content 加 width；以 :open 為開啟狀態設定樣式；以既有的 :checked 選擇器凸顯所選項。¹ - 在 <option> 中放入真正的 HTML（圖片、影片、表情符號），並以既有的 CSS 重新塑造選單，例如 grid-template 加 gap 的 grid；以一個作為第一個子元素、內含 <selectedcontent> 的 <button> 取代內建按鈕。¹²

對重視無障礙的團隊： - 語意化的 select 在支援與不支援的瀏覽器中，都能保有鍵盤導覽與螢幕報讀器支援，且無需外部函式庫。¹ - 當 option 同時帶有圖片與文字標籤時，請讓圖片的替代文字保持空白，以免螢幕報讀器把標籤唸兩次。¹ - 依照這場 session 自己的檢查清單，在缺乏支援的瀏覽器中以及搭配輔助工具進行測試後再上線。¹

對規劃推行的技術主管： - 把可自訂的 select 當作一種漸進式增強：Safari 27 與 Chrome 135 取得自訂設計，其餘所有人得到原生彈出選單，且不需要任何 JavaScript 回退方案。¹ - 現在就在 Safari Technology Preview 或 Safari Beta 中評估它，並把它與目前壓在您 bundle 裡的下拉選單函式庫做權衡。¹

FAQ

什麼是可自訂的 select？

可自訂的 select 是一組 HTML 與 CSS 的能力，由 Safari 團隊在 WWDC 2026 上提出，並自 Safari 27 與 Chrome 135 起提供，讓既有的 <select> 元素變得完全可自訂。您以 CSS 為按鈕、下拉選單、箭頭與勾選標記設定樣式，並在 option 中放入豐富內容，同時保有這個元素內建的無障礙功能。¹

我要如何啟用可自訂的 select？

在兩個地方套用 appearance: base-select：一是 select 元素本身，這會把原生的按鈕呈現換成一組較精簡的基礎樣式；二是 ::picker(select)，這會讓下拉選單退出其原生呈現，好讓您自由設定樣式。¹

我能在 option 元素中放入圖片或其他 HTML 嗎？

可以。這場 session 表示您可以在 option 中放入任何類型的內容：圖片、影片、表情符號。示範為每個 option 使用一個 SVG 與一個文字標籤，並讓圖片的替代文字保持空白，好讓螢幕報讀器只唸出標籤一次，再以 grid-template 與 gap 將選單排成 CSS grid。¹

selectedcontent 元素是什麼？

<selectedcontent> 是在 select 的按鈕內顯示目前所選 option 豐富內容的元素。可自訂的 select 允許將 <button> 作為 <select> 的第一個子元素，這在 HTML 中過去並不被允許；把 <selectedcontent> 放在那個按鈕內，便會映現出所選 option 的內容，例如標籤旁的一個 SVG，而且這個元素可以直接設定樣式。¹²

在不支援可自訂的 select 的瀏覽器中會發生什麼事？

控制項會優雅地降級。漸進式增強意味著 select 仍完全可用，使用者得到的是原生彈出選單，而由於 <select> 是語意化元素，內建的無障礙功能依然保留。這場 session 建議在上線前於不支援的瀏覽器中以及搭配輔助工具進行測試。¹

可自訂的 select 刪除一項依賴的方式，與 CSS Grid Lanes 為 masonry 版面所做的如出一轍，而這樣的搭配是刻意的：session 315 本身在結尾就指引觀眾前往 Grid Lanes 那場 session，而示範網站也同時使用了這兩項功能。¹Apple 不斷擴展純 HTML 元素所能做的事，這與Apple 平台上的 HTML model 元素所涵蓋的軌跡相同，而每一個您不再需要交付的下拉選單函式庫，都強化了 no-build 宣言中的論點。完整的系列中樞請見 Apple 生態系系列。

References