原生 select 标签本身不支持手动控制“可折叠”状态，其展开/收起由浏览器和系统决定；所谓“可折叠”实为其默认行为，无需额外操作，强行干预会破坏可访问性和兼容性。
select 标签本身不支持“可折叠”交互
HTML 原生 select 标签渲染的是系统级下拉控件，浏览器决定其展开/收起行为，无法用 CSS 或属性直接控制“折叠状态”。所谓“可折叠”，实际是指用户点击时才显示选项、默认只显示选中项——这正是 select 的默认行为，不需要额外操作。
容易踩的坑是误以为要手动实现展开/收起逻辑（比如用 display: none 切换 select），这会导致：选项不可访问、键盘导航失效、屏幕阅读器无法识别、移动端触发异常。
- 不要对
select设置display: none或visibility: hidden来模拟折叠 - 不要用 JavaScript 手动 show/hide
select元素——它不是普通容器，没有“折叠态”概念 - 若需自定义样式（如箭头图标、背景色），只能通过有限 CSS 属性修饰，且兼容性差（尤其 Safari 对
appearance支持不稳定）
如何让 select 在视觉上更接近“可折叠组件”
目标是保持语义正确和可访问性，同时优化外观和交互反馈。关键在于利用原生能力，而非覆盖它。
- 用
select+option构建结构，确保键盘Tab和Enter可操作 - 通过
select:focus或select:has(:focus-within)（需注意兼容性）添加聚焦样式，提示当前可交互 - 禁用原生外观后自定义箭头：设置
appearance: none，再用伪元素或背景图添加箭头，但必须保留右侧足够空白供点击区域 - 移动端注意：iOS Safari 会忽略
appearance: none，且强制使用原生选择器；不要试图用pointer-events: none拦截点击
<select aria-label="请选择城市"><option value="" disabled selected>-- 选择城市 --</option> <option value="bj">北京</option> <option value="sh">上海</option></select>
什么时候该放弃 select，改用 div + ARIA 实现真“可折叠”
当需求明确要求：点击标题才展开选项、支持搜索过滤、可多选且显示标签、需要动画过渡、或必须嵌入复杂 HTML 内容（如带图标的选项）——这时原生 select 已无法满足，必须用自定义下拉（custom dropdown）。
- 核心是用
role="combobox"或role="listbox"配合aria-expanded、aria-controls等属性 - 必须手动管理键盘导航（
ArrowDown/ArrowUp移动焦点，Enter确认，Escape关闭） - 不能只靠 CSS
max-height+transition实现展开动画——ARIA 状态和 DOM 可见性必须同步 - 测试重点：NVDA/JAWS 屏幕阅读器是否播报“已展开”，
Tab是否按预期跳转，移动端点击区域是否足够大（至少 44×44px）
常见错误：把 select 当 div 用
开发者常犯的错是给 select 添加 onclick、onmousedown 事件去控制显隐，或用 contenteditable 模拟编辑——这些都会破坏表单语义和可访问性链路。
-
select的值变更应只响应change事件，而不是click - 不要监听
select的mousedown并preventDefault()—— 这会阻止下拉菜单弹出 - 服务端接收数据时，确认后端解析的是
name属性对应的value字符串，而非 innerText - 如果用 Vue/React，避免用
v-model或valueprop 绑定到非受控select，否则可能丢失初始选中状态
原生 select 的“可折叠”本质是操作系统级交互，强行干预只会引入兼容性和无障碍问题。真正需要定制行为时，得接受用 ARIA 重做一套——这不是偷懒能绕过的复杂点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
