Customizable Select：終於能設計真正的 <select>

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

TL;DR

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

從 div 雜燴回到語意化 HTML

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

這場演講的切入點，是 <select> 原本就做得很好的部分。此元素開箱即提供基本無障礙：跨 option 元素的鍵盤導覽，以及穩健的螢幕閱讀器行為，全都不需外部函式庫。¹在 Apple 平台上，原生呈現是大家熟悉的下拉按鈕，並與平台上其他所有控制項一致，這讓使用者擁有一套已知的導覽方式。¹

問題一直出在設計。把原生控制項放到一個精心設計的網站上，它會顯得格格不入，怎麼也融不進去。在此之前，解法意味著完全捨棄此元素，改用 JavaScript 小工具或一堆 div，再親手重建無障礙。Customizable select 保留了元素，並把樣式設計交到您手上，分為演講以一個真實攝影師作品集為例所走過的三個階段：按鈕、下拉選單，最後是超越純文字的內容。¹

設計按鈕：base-select、::picker-icon 與 :open

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

select {
  appearance: base-select;
}

appearance: base-select 會將原生呈現換成一組較小、可供您修改的基礎樣式。¹效果會透過繼承立即顯現：示範網站在 body 上設定 font-family: Gill Sans，而 select 按鈕現在繼承了 body 字型，與旁邊的標籤相符。¹從此處開始，背景、邊框與內距便可像任何其他元素一樣調整。

兩個新的著力點為按鈕收尾。箭頭有自己的選擇器 ::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 */
}

演講對成果的評語是：只用幾行 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 安排間距，再為下拉選單處理邊框與 box-shadow。¹要強調目前的選擇，用的是既有的 :checked 選擇器，而非任何新東西：把勾選的選項加粗，其餘的變灰。¹

option:checked {
  font-weight: bold;
}

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

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

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

選項中的豐富內容，以 grid 排版

更大的轉變在於 <option> 裡頭能放什麼。演講說得很明確：任何形式的內容都行，圖片、影片、表情符號，隨您喜歡。¹示範為攝影師最熱門的主題打造了一個分類瀏覽器，每個選項中都有一個 SVG 符號與一個標籤：

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

請留意空白的 alt。Tim 刻意把圖片的替代文字留空，否則「Flowers」這個標籤會被螢幕閱讀器唸出兩次。¹細節雖小，後果卻實在：豐富的選項在輔助科技下，能與純文字選項一樣好用。

移除預設勾選標記後，示範改以 checked 選擇器與顏色變化來突顯所選的選項。¹還剩一個問題：符號加標籤的選項會讓下拉選單變得很長。解法重用了既有的 CSS，因為 picker 如今是一個普通的樣式目標。一個 grid 版面重塑了整個選單：

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

grid-template 定義列數與欄數，而 gap 定義 grid 儲存格之間的間距，於是下拉選單便對齊成一個井然有序的分類網格。¹演講以同一主題的精彩之作收尾：一個完全用 customizable select 打造的放射狀色彩選擇器。¹

可替換的按鈕與 selectedcontent

分類瀏覽器還留有一處缺口：SVG 符號活在選項裡，但顯示目前選擇的那個按鈕，卻只呈現文字。¹Customizable select 透過讓您替換內建按鈕來補上這個缺口，方法是把一個 <button> 元素放在 <select> 的第一個子元素位置。在 select 裡放一個按鈕，在 HTML 中過去並不允許；如今它接受自訂內容，例如標籤，或是專為此用途打造的那個元素。¹

WebKit 的 Safari 27 beta 公告為那個元素命了名：<selectedcontent>。把它放進 select 的第一個子按鈕中，它就會顯示目前所選選項的內容，並可直接設計樣式。²

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

該元素會映現所選選項所屬的任何豐富內容，例如示範中「Everything」標籤旁的那個 SVG，於是按鈕終於展現出與它所開啟的選單相同的視覺語彙。¹²

漸進增強內建其中

演講的最後一步，正是各團隊一旦略過便會自食其果的那一步：在不支援 customizable select 的瀏覽器中檢查設計。答案以最好的方式平淡無奇。漸進增強隨即生效，控制項依然可用，而客戶會拿到原生彈出選單。¹重用 select 元素意味著回退方案早已存在，而且由於 <select> 是語意化元素，內建的無障礙功能能在每一個瀏覽器中留存。¹

可用性十分具體：Safari 27 與 Chrome 135。要立即試用這些功能，請下載 Safari Technology Preview 或 Safari Beta。¹演講的結尾指引很實際：到 webkit.org 上看看示範，在自己的網站上設計一些簡單的東西，在不支援的瀏覽器中、以及搭配輔助工具進行測試，並閱讀 WebKit 的最佳實務資料，讓介面對每個人都行得通。¹

重點整理

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

給重視無障礙的團隊： - 語意化的 select 在支援與不支援的瀏覽器中一律保有鍵盤導覽與螢幕閱讀器支援，且無需外部函式庫。¹ - 當選項同時帶有圖片與文字標籤時，請把圖片的替代文字留空，以免螢幕閱讀器把標籤唸兩次。¹ - 依照演講本身的檢查清單，在出貨前以不支援的瀏覽器、並搭配輔助工具進行測試。¹

給規劃導入的技術主管： - 把 customizable select 當作漸進增強來看待：Safari 27 與 Chrome 135 取得自訂設計，其餘所有人取得原生彈出選單，且無需 JavaScript 回退方案。¹ - 現在就在 Safari Technology Preview 或 Safari Beta 中評估它，並權衡它與目前躺在您 bundle 中的那個下拉選單函式庫。¹

FAQ

什麼是 customizable select？

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

我該如何啟用 customizable select？

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

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

可以。演講指出您可以在選項中放入任何形式的內容：圖片、影片、表情符號。示範在每個選項中使用一個 SVG 與一個文字標籤，並把圖片的替代文字留空，使螢幕閱讀器只唸標籤一次，再以 grid-template 與 gap 把選單排成 CSS grid。¹

selectedcontent 元素是什麼？

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

在不支援 customizable select 的瀏覽器中會發生什麼？

控制項會優雅降級。漸進增強意味著 select 依然完全可用，客戶會拿到原生彈出選單，而且由於 <select> 是語意化元素，內建的無障礙功能依舊保留。演講建議在出貨前以不支援的瀏覽器並搭配輔助工具進行測試。¹

Customizable select 刪去一個依賴，正如 CSS Grid Lanes 之於 masonry 版面，而這樣的搭配是刻意安排的：session 315 本身在結尾就把觀眾引向 Grid Lanes 那場演講，而示範網站同時用上了這兩項功能。¹Apple 持續擴展純 HTML 元素所能做到的事，這與 Apple 平台上的 HTML model 元素 所談的是同一條軌跡，而您每少出貨一個下拉選單函式庫，都讓 no-build 宣言 的論點更加站得住腳。完整的系列中樞是 Apple Ecosystem Series。

參考資料