品牌精選樣式

網頁功能： 可自訂的 <select>

可自訂的選取 API 提供宣告式、CSS 導向的方式，可設定 <select> 元素的樣式，完美符合品牌設計系統。啟用 appearance: base-select 後，您就能存取 select 元素的內部 Shadow DOM，並使用標準 CSS 屬性設定按鈕、選項挑選器清單、箭頭圖示和勾號指標的樣式。

以往，如要打造完全符合品牌形象的選取元素，必須使用 JavaScript 從頭重新建構控制項，但這通常會破壞無障礙功能、鍵盤導覽和原生表單整合。使用 appearance: base-select，您可以自訂外觀，而瀏覽器會處理焦點管理、頂層算繪和無障礙功能繫結。

導入方式

如要導入品牌選取樣式，請按照下列步驟操作：

  1. 選擇加入自訂功能：將 appearance: base-select 同時套用至 <select> 元素和 ::picker(select) 虛擬元素 (指定選項下拉式選單)。
  2. 建構自訂按鈕 (選用)：直接在 <select> 內定義 <button> 元素，取代預設觸發條件。使用這個按鈕內的 <selectedcontent> 元素，代表目前所選選項的文字或內容。
  3. 設定挑選器清單樣式：使用 ::picker(select) 虛擬元素，為下拉式選單套用字體排版、背景顏色、邊框和陰影。瀏覽器會在頂層算繪這個元素，因此 z-index 衝突已成為過去。
  4. 設定內部圖示樣式：
    • 使用 select::picker-icon 設定箭頭圖示的樣式或加以取代。
    • 使用 option::checkmark 設定所選選項旁勾號指標的樣式。
  5. 樣式選項：為 <option> 元素套用懸停狀態、邊框間距和版面配置樣式。

程式碼範例：品牌快遞公司選項

以下範例示範如何使用等寬字型和虛線框線，自訂選取樣式，以符合特定「包裹」品牌美學。

/* Enable customization for the select and its picker */
.brand-select,
.brand-select::picker(select) {
  appearance: base-select;
}

/* Style the visible trigger button */
.brand-select {
  font-family: 'Courier New', monospace;
  background-color: #fffaf0;
  color: #8b4513;
  border: 2px dashed #8b4513;
  border-radius: 4px;
  padding: 0.75rem;
  font-size: 1rem;
  cursor: pointer;
}

/* Style the dropdown options list */
.brand-select::picker(select) {
  font-family: 'Courier New', monospace;
  background-color: #fffaf0;
  border: 2px dashed #8b4513;
  border-radius: 4px;
  padding: 0.5rem;
}

/* Customize internal part colors to match text */
.brand-select::picker-icon {
  color: #8b4513;
}

.brand-select option::checkmark {
  color: #8b4513;
}

/* Style individual options and hover effects */
.brand-select option {
  padding: 0.5rem;
  border-radius: 4px;
  color: #8b4513;
  cursor: pointer;
}

.brand-select option:hover {
  background-color: #fdf5e6;
}

<label for="preferences">Select shipping preference</label>
<select class="brand-select" id="preferences" name="preferences">
  <button>
    <selectedcontent></selectedcontent>
  </button>
  <option value="standard">Standard Shipping</option>
  <option value="express" selected>Express Shipping</option>
  <option value="overnight">Overnight Delivery</option>
</select>

策略執行與最佳做法

  • 建議：如果設計系統需要所有表單控制項都具備高擬真度和視覺一致性，而標準跨瀏覽器選取覆寫無法達成此效果，請使用 appearance: base-select。
  • 如果您需要使用作業系統的原生挑選器體驗 (例如 iOS 裝置上的標準滾輪挑選器)，請不要使用這個選項。啟用 base-select 會停用原生行動 UI 控制項，改用網頁算繪的頂層選單。
  • 務必確認色彩對比度符合 WCAG 標準。您可以使用自訂挑選器設定臨時顏色，但必須確保文字在自訂背景上仍清晰可辨。
  • 測試版面配置行為。設定 appearance: base-select 會移除預設的瀏覽器行為，也就是根據最長的選項寬度調整選取範圍大小。您可能需要設定固定寬度，或使用彈性/格線限制，避免版面配置位移。
  • 確認 <select> 具有 name 屬性和相關聯的 <label>。這樣一來，即使使用自訂 UI，螢幕閱讀器仍可存取元件，且元件能與標準表單提交作業搭配運作。
  • 在選項中使用標準 value 屬性，確保表單提交功能與先前完全相同。

備用策略

可自訂 <select> 的備用方案和瀏覽器支援

如果瀏覽器尚未支援 appearance: base-select，<select> 元素會正常降級為標準作業系統下拉式選單。

  • 忽略非文字內容：舊版瀏覽器會移除 <option> 標記內的 HTML 代碼 (例如 <svg> 或 <div>)，只轉譯文字節點。確保 <option> 的文字內容本身清晰可讀且有意義。
  • HTML 結構處理：標準剖析器可能會忽略 <select> 內的 <button> 和 <selectedcontent> 標記，或將其視為無效。如果將標準文字視為可讀取的備用文字，則不需要使用繁重的 JavaScript 填充碼來進行漸進式增強。
document.addEventListener("DOMContentLoaded", () => {
  // Check if browser supports base-select value
  if (!CSS.supports("appearance", "base-select")) {
    // Custom select overrides are not supported natively.
  }
});