徵求開發人員意見回饋：可自訂選取

Una Kravets

多年來，開發人員一直認為設定 <select> 元素等表單控制項的樣式是一大難題，我們也一直在努力解決這個問題。雖然這項工作相當複雜，需要花費很長時間才能完成，但我們即將推出這項功能。可自訂的 select 元素版本已正式進入 WHATWG 的第 2 階段，獲得許多跨瀏覽器廠商的關注，並提供原型供您在 Chrome Canary 130 測試。

歡迎試用並提供意見

確認安裝的 Chrome Canary 已更新至 130 版，且已啟用實驗性網路平台功能旗標。如要啟用這項旗標，請在網址列前往 chrome://flags，然後啟用 #experimental-web-platform-features。接著，你應該就能在這篇文章中看到 Codepen 示範。或者，您也可以查看這個 Codepen 集合，在同一處查看所有範例。

請使用這份表單提供功能意見回饋。只要三分鐘就能完成！

接下來，我們將深入探討可自訂選取 API 的功能，這項 API 是以現有的 HTML 選取標記為基礎。

選擇加入新版 <select>

如要採用新行為，請在網頁內選取按鈕和選取器上，使用 CSS appearance 屬性。如要選擇加入，請在 <select> 元素和 ::picker(select) 上設定 appearance: base-select。

::picker(select) 是新的使用者代理程式提供的虛擬元素，僅適用於已使用 appearance: base-select 選擇採用新行為的 <select> 元素。這個挑選器虛擬元素是由基本選取按鈕觸發的彈出式視窗。您可以同時選擇加入這兩項功能，如以下程式碼所示：

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

您可以選擇只啟用網頁內按鈕，但無法只啟用挑選器彈出式視窗，而不啟用網頁內按鈕。只有在 appearance: base-select 套用至 <select> 後，系統才會建立 ::picker(select)。

現在可以自訂選取元素了。新的可自訂選取元素提供一些預設樣式，在不同瀏覽器和作業系統中看起來都一樣。以下是 macOS 版 Chrome 中，預設自訂選取元素與現有選取元素的對比：

拆解各個部分

進入新的可自訂選取模式後，您現在可以存取的新元素包括： - selectedoption：反映目前所選選項的內部 HTML。 option::before：包含勾號，表示目前選取的選項是預設無障礙功能 (可能會有變動)。- ::picker(select)：彈出式視窗，包含自訂選取項目中 button 以外的所有內容。

您可以設定選取項目的任何部分樣式。舉例來說，您可以在 <option> 元素中加入任意非互動式內容、設定網頁內按鈕的樣式 (用於開啟選取下拉式選單)，以及設定選項下拉式清單 (::picker(select)) 的樣式。

您也可以設定 button 的樣式、自備箭頭指標，以及在任何元素內和周圍新增任意內容。除了新增內容外，您也可以隱藏任何新元素和預設樣式。舉例來說，如果不想在選項的 ::before 虛擬元素中顯示勾號指標，請使用下列 CSS。

/* Remove the default checkmark from the selected option */
option::before {
 display: none;
}

雖然選取項目中可以有無限數量的元素，但瀏覽器會將 <button> 元素以外的所有元素歸入 ::picker(select) 虛擬元素，其行為就像錨定在按鈕上的彈出式視窗。這個 <button> 會切換 ::picker(select)。選取器中的選項和其他元素會直接移至 ::picker(select)，您也可以自行加入包裝函式來設定樣式。這個包裝函式也會放在 ::picker(select) 虛擬元素中。

<select>
  <button>
    <selectedoption></selectedoption>
  </button>
  // Everything else that will go into the ::picker(select) popover
</select>

新的可自訂 <select> 使用彈出式視窗和錨定定位功能。這項服務是以這兩項基礎技術建構而成。也就是說，選取元素中的下拉式選項清單會做為彈出式視窗，錨定在開啟選取元素的觸發按鈕上。

您可以使用錨定位置設定這個 ::picker(select) 彈出式視窗的樣式 (包括將其錨定至其他元素)。這種內容模型也代表頂層動畫樣式可與選項清單搭配使用，為進入和退出效果加上動畫。

強化現有的 <select> 元素

先前，Chrome 團隊曾考慮過 <selectlist> 元素的概念。本文介紹的功能經過重新設計，改為重複使用現有的 <select> 元素。

重複使用現有 <select> 元素的主要優點之一，就是能夠逐步強化基本 HTML 元素。與全新元素相比，重複使用 <select> 仍會在網頁上顯示有意義的內容。以下範例顯示自訂選取器，以及不支援的瀏覽器使用者會看到的內容：

基本樣式

變更可能很簡單，例如選取元素的視覺樣式。例如，更新按鈕樣式、懸停和焦點樣式，或選取選項的背景。使用 appearance: base-select 選擇加入後，即可將任何 CSS 套用至所選部分。

如要自訂箭頭指標，請在選取器中加入自己的按鈕和箭頭。

<select>
  <button>
    <selectedoption></selectedoption>
    <span>
      // Arrow here
    </span>
  </button>
  // Everything else that will go into the ::picker(select) popover
</select>

接著，設定箭頭樣式：

/* style the arrow */
button span {
  /* arrow styles */
  transition: rotate 0.2s;
}

/* adjust arrow styles when the picker is open */
select:open button span {
  rotate: -180deg;
}

選項中的複雜內容

您還能更進一步，在 <select> 內的 <option> 元素中，新增字串以外的內容並設定樣式。舉例來說，在下拉式選單中，國家/地區名稱旁會顯示國旗圖片。如要達成這個目標，請在選項文字旁加入圖片元素。

<option value="france">
  <img src="img/flag_of_france.svg" alt="" />
  <span>France</span>
</option>

較複雜的例子可能包括個人資料相片、名稱和替代資訊，協助您決定要在下拉式選單中選取哪個項目。

<option value="eur">
    <img src="euro-flag.png" alt="" />
    <div class="currency">
      <div class="currency-short">EUR</div>
      <div class="currency-long">Euro</div>
    </div>
    <div class="symbol" aria-hidden="true">€</div>
</option>

設定所選選項的樣式

您可能希望所選選項在選取狀態下的顯示方式與下拉式選單中的顯示方式不同。Gmail 使用者介面就是一個例子，為了節省空間，選取選項後就會移除標籤。方法是連結至 <selectedoption> 元素進行樣式設定。<option> 包含下列所有標記：

 <option value="reply-all">
    <img class="material-symbol"  src="material-symbol-reply.png">
    <span class="text">Reply all</span>
  </option>

現在，請在 <selectedoption> 內的 .text 上套用 display: none，隱藏文字內容並只顯示圖示：

selectedoption .text {
  display: none;
}

互動選項

您可以完全控管 ::picker(select) 的樣式，並在先前的示範基礎上，讓它在懸停和聚焦時互動。在這個示範中，新的 calc-size() 函式用於為挑選器的寬度建立動畫，從顯示圖示到顯示選項的完整寬度，或在選取項目有 focus-visible 選項時顯示。

/* base styles when picker is open but not interacted with */
::picker(select) {
  width: var(--icon-width);
  transition: width 0.5s;
}

/* animate the text in on hover & focus */
::picker(select):hover,
select:has(option:focus-visible)::picker(select) {
  /*  auto width!  */
  width: calc-size(auto, size + 0.5rem);
}

限制和無障礙功能注意事項

能力越大，責任越重。為確保功能易於使用，我們設有一些限制。

• 除了 <option> 元素外，<select> 內目前不允許任何互動式 (可聚焦) 元素，例如按鈕或其他元素。目前，建議的內容模型僅允許 <div>、<span>、<option>、<optgroup>、<img>、<svg> 和 <hr> 元素。
• 分割按鈕目前處於實驗階段，我們正在研究無障礙解決方案。

未來，隨著這些體驗的無障礙功能更加完善，內容模型預計會擴展得更具彈性。

結論

我們很高興看到這項功能在工作群組和標準機構中取得進展，並分享我們在積極建構原型和評估這項功能時的進度。如果發現任何功能無法正常運作，請告訴我們！

這項功能仍在開發階段，歡迎透過這份簡短的意見回饋表單提供意見。

感謝您協助我們確保這項功能正確運作，並讓開發人員更輕鬆地在網路上建構無障礙、可自訂的表單控制項！