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

Una Kravets

多年來，開發人員回報表單控制項 (例如 <select> 元素) 是造成開發人員困擾的一項問題，我們正在設法找出解決方案。雖然這項工作相當複雜，且需要花費很長的時間才能完成，但我們已接近推出這項功能的階段。這項可自訂的選取元素已正式在 WHATWG 的第 2 階段中正式上線。除了這個版本的跨瀏覽器興趣十分豐富，還內建一個原型，方便您在 Chrome Canary 130 中進行測試。

歡迎試用並提供意見回饋

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

歡迎填寫這份表單，針對這項功能提供意見回饋。只需三分鐘即可完成！

讓我們深入瞭解以現有的 HTML 選取標記為基礎，可自訂的精選 API 有哪些功能。

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

未來，由於這些體驗的無障礙設計故事更加多元，未來我們預計會擴大內容模型的彈性。

結論

我們很高興看到這項功能在工作小組和標準機構的協助下持續進展，並在積極建構原型和評估這項功能的形態時，分享我們的進度。如果您遇到了無法如預期般運作的功能，請告訴我們！

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

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