您现在的位置：程式碼之家 >> 編程語言 > >> 更多程式語言 >> 程式設計綜合問答

HTML Select 在手機端顯示為彈出選單：瀏覽器原生行為與自定義下拉替代方案

編輯：程式設計綜合問答

現象

手機瀏覽器 (iOS Safari / Android Chrome) 點擊 `` 渲染為平台原生選擇器 (iOS `UIPickerView`、Android `AlertDialog`/底部 Sheet)。HTML 標準**未規定渲染外觀**，完全由 User Agent 決定。

無法透過 CSS/JS 強制改為桌面式下拉

原生 ``，改用 **`div` + `ul` + JS 模擬**。

成熟 UI 庫推薦

庫	特點	體積	適用場景
Select2	搜尋、標籤、遠端資料、模板、無障礙支援完善	~20KB (gz)	傳統 jQuery 專案、功能豐富需求
Choices.js	原生 JS、無依賴、效能好、支援多選/搜尋/遠端	~15KB (gz)	現代原生 JS 專案、輕量
Tom Select	Select2 分支、無 jQuery、更快	~18KB (gz)	Select2 使用者遷移
React Select / Vue Select / Ant Design Select	框架深度整合、TypeScript、虛擬列表、無障礙	視框架	React/Vue/Angular 專案
Element Plus / Ant Design Mobile / Vant	移動端優化、底部彈出樣式 (Action Sheet) 符合移動端習慣	視框架	移動端 H5 / 小程式

極簡原生 JS 實現核心邏輯 (教學用)


// HTML

  請選擇
  
    選項一
    選項二
  


// JS 要點
// 1. 點擊切換 .hidden
// 2. 點擊選項更新 .selected-value、隱藏列表、觸發 change 事件
// 3. 點擊外部關閉 (document.addEventListener('click', ...))
// 4. 鍵盤支援 (Tab, Enter, Esc, 方向鍵) — 無障礙必要
// 5. ARIA 屬性 (role="listbox", aria-expanded, aria-selected)

結論

手機端 `