原生是唯一无需js即可可靠工作的下拉方案，但其行为和样式由浏览器硬控；css无法稳定修改箭头和下拉面板，因safari/ios对appearance:none支持差、::after无效、background-image在firefox失效，且移除原生外观会破坏可访问性。
原生 <select></select> 是唯一无需 JS 就能可靠工作的下拉交互方案，但它的行为和样式由浏览器硬控制，强行定制会破坏可访问性或在 Safari/iOS 上失效。
为什么 <select></select> 不能靠 CSS 改箭头和下拉面板
Chrome 允许用 appearance: none 去掉默认样式，但 Safari 对 -webkit-appearance: none 支持不稳定，iOS 上甚至直接禁用点击；::after 伪元素无法盖住原生箭头，background-image 在 Firefox 中不生效。更关键的是，移除原生外观后，屏幕阅读器可能无法识别控件类型，键盘用户按 Space 或 Enter 也无法展开。
- 安全可改：字体、颜色、
width、border、padding（但别设height或line-height，Safari 会错位） - 必须保留：
name属性（否则表单不提交）、<label for="id"></label>（否则无障碍失效） - 空
value的<option></option>是提示项，不是占位符——提交时它会发一个空字段，后端得处理
<details><summary></summary></details> 能当菜单用吗
能，但它不是“菜单”，是“展开/收起”语义组件。适合做 FAQ、折叠导航、配置区块，不适合替代 <select></select> 的单选提交场景。
-
<summary></summary>必须是<details></details>的第一个子元素，且不能被<div> 等包裹，否则点击失效 <li>IE 完全不支持；Safari 15.4+ 才稳定支持 <code>:has()，想做互斥效果（类似单选）得用锚点 +:target，体验生硬 - 键盘支持天然完整：Tab 可聚焦，
Space/Enter切换，ArrowDown进入内容区——不用手写aria-expanded - 没给触发按钮加
role="combobox"和aria-expanded="false"，AT（辅助技术）会把它当成普通按钮 - 下拉列表没设
tabindex="-1"，Tab 键会跳进不可见区域，再按 Shift+Tab 也回不来 - 选项没用
role="option"和动态更新aria-selected，方向键导航完全无效 - 放弃对原生
<select></select>的样式幻想，真要定制就用<button></button>+<ul></ul>结构，监听touchstart响应 - 避免在
<summary></summary>或按钮上用preventDefault()——这会让键盘用户按Enter失效 - 收起逻辑别只靠
blur：Firefox 不冒泡，移动端根本不可靠；改用mousedown监听 body，配合event.target.closest('.dropdown')判断点击位置
手写 <button>+<ul></ul></button> 下拉时最常漏的三件事
自定义下拉看似自由，但漏掉任意一项，键盘用户或屏幕阅读器就卡死。
移动端下拉交互的硬伤怎么绕
iOS Safari 的 click 有 300ms 延迟，且原生 <select></select> 点击必然唤起滚轮选择器，样式和逻辑都失控。
真正难的不是让下拉“动起来”，而是让它在所有设备、所有输入方式（鼠标/键盘/触摸/AT）下行为一致——原生方案限制多但稳，手写方案自由但每一步都得补全语义和事件细节。
