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

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 UI 會在選取選項後移除標籤，以節省空間。方法是鉤掛 <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() 函式，為選擇器寬度加上動畫效果，從顯示圖示到顯示選項的完整寬度，或是如果選取項目有焦點可見的選項。

/* 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> 元素。
• 分割按鈕目前處於實驗階段，我們正在研究無障礙解決方案。

隨著這些體驗的無障礙功能日趨完善，內容模型預計將擴大並變得更具彈性。

結論

我們很高興看到這項功能在工作小組和標準機構的協助下順利推進，並在積極建構原型和評估這項功能的形態時，分享我們的進度。如果發生無法正常運作的情況，請告訴我們！

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

感謝您協助我們確保這項功能正確無誤，並讓您更輕鬆地在網路上建立可自訂的無障礙表單控制項！