在本機和自定義選擇元素之間達到平衡-css教學-PHP中文網

首頁

web前端

css教學

在本機和自定義選擇元素之間達到平衡

Lisa Kudrow

Apr 05, 2025 am 09:32 AM

Striking a Balance Between Native and Custom Select Elements

本文探討如何構建既美觀又易訪問的樣式化下拉選擇元素。我們將巧妙地結合原生<select></select>元素和自定義樣式，實現最佳用戶體驗。

名稱的重要性：下拉列表、菜單、導航

在研究過程中，我們發現“下拉列表”、“菜單”、“導航”等術語經常混用，導致歧義。本文將明確定義“下拉列表”：

下拉列表:一種交互式組件，包含一個按鈕，用於顯示和隱藏項目列表，通常通過鼠標懸停、點擊或輕觸觸發。列表默認隱藏，交互後顯示。列表通常以塊狀內容（即選項）的形式覆蓋其他內容。

許多界面元素看起來像下拉列表，但簡單地將其稱為“下拉列表”如同用“魚”來描述動物一樣籠統。我們需要區分菜單、導航和選擇元素這三種不同類型的下拉列表：

菜單:頁面內容中用戶可執行的命令或操作列表。
導航:用於網站導航的鏈接列表。
選擇:表單控件（<select></select> ），用於在表單中顯示供用戶選擇的選項列表。

不同用戶對界面的感知和交互方式不同，因此對UI元素的命名和設計模式的定義存在主觀性。

<menu></menu>元素已棄用，不推薦使用。關於包含式菜單和菜單按鈕的詳細說明，以及為什麼不應將ARIA 菜單角色用於站點導航，請參考相關資源。

我們將專注於作為<select></select>元素的下拉列表類型。

`<select></select>`元素的樣式化挑戰

根據MDN 的說法，樣式化表單控件存在“好、壞、醜”三種情況。<select></select>元素無疑屬於“醜”的範疇，其樣式化支持不足，導致開發者常常尋求替代方案。

理想情況下，如果可以避免使用<select></select>，就應該避免。然而，在某些情況下，<select></select>仍然是最佳選擇，例如選項數量眾多、佈局空間有限或時間/預算不足等。

自定義`<select></select>`的需求

創建自定義<select></select>時，通常需要滿足以下需求：

按鈕顯示當前選定的選項。
點擊按鈕切換選項列表的可見性。
點擊選項列表中的選項會更新所選值，按鈕文本隨之更改，選項列表關閉。
點擊組件外部會關閉選項列表。
觸發器包含一個指向下方的三角形圖標，指示存在選項。

然而，這僅僅滿足了部分需求。原生<select></select>元素還提供以下功能：

無論用戶的視覺能力如何，選定的選項都清晰可見。
組件能夠以可預測的方式與鍵盤交互（例如，使用箭頭鍵導航，Enter 鍵選擇，Esc 鍵取消等）。
輔助技術（例如屏幕閱讀器）能夠清晰地向用戶宣布元素，包括其角色、名稱和狀態。
選項列表位置調整（即不會被屏幕裁剪）。
元素遵守用戶的操作系統偏好設置（例如高對比度、配色方案、動畫等）。

許多自定義<select></select>組件都無法完全滿足這些需求。

構建“混合”選擇器

構建簡單的自定義<select></select>會犧牲功能性以換取美觀性。更好的方法是默認提供原生<select></select>，並在可能的情況下將其替換為更美觀的自定義版本。這就是“混合”選擇器的理念。它包含兩個選擇器：

原生<select></select>，默認可見且可訪問。
自定義<select></select>，默認隱藏，僅在使用鼠標時顯示。

以下是HTML 結構示例：

 <label for="selectNative">Main job role</label>
<div>
  <select id="selectNative" class="selectNative">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
  </select>
  <div class="selectCustom">
    <!-- Custom select content -->
  </div>
</div>

CSS 代碼用於控制兩個選擇器的顯示和位置：

 .selectNative,
.selectCustom {
  position: relative;
  width: 22rem;
  height: 4rem;
}

.selectCustom {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

@media (hover: hover) {
  .selectCustom {
    display: block;
  }
  .selectNative:focus .selectCustom {
    display: none;
  }
}

JavaScript 代碼用於處理點擊事件、同步兩個選擇器的值以及鍵盤導航。