原生 点击展开是浏览器默认行为，无需 js/css；若失效，常见原因包括 pointer-events: none、disabled、height+overflow:hidden、clip-path 或 size 属性误用；自定义需放弃原生，改用 重写或 轻量替代。
点击展开的 <select></select> 本质就是原生行为，不用额外构建
浏览器原生 <select></select> 点击后自动下拉展示 <option></option>，这是默认行为，不需要 JS 或 CSS 模拟。如果你发现点不动，大概率是被样式或脚本意外禁用了。
常见干扰点：
-
pointer-events: none或disabled属性写在了<select></select>上 - CSS 中设置了
height+overflow: hidden把下拉区域裁掉了（注意：下拉菜单是脱离文档流的浮层，但某些全局样式如transform或will-change可能影响其触发） - 父容器有
clip-path或overflow: hidden且位置紧贴<select></select>顶部，导致下拉框一展开就被剪掉
<select></select> 的 size 属性不是“展开”，而是强制多行显示
设 size="4" 会让 <select></select> 一直显示 4 行选项，不依赖点击——这和“点击展开”逻辑相反，属于静态列表模式。它绕过了原生下拉浮层，也失去移动端原生选择器（如 iOS 的滚轮 picker）支持。
适用场景有限：
- 表单明确要求始终可见全部选项（比如小范围固定枚举）
- 需要键盘上下键直接操作、不希望弹出浮层干扰布局
- 但会破坏可访问性（
role="combobox"语义丢失），且无法自定义滚动条样式
真要自定义展开效果？得放弃原生 <select></select>
所有“看起来像 select、能点开、带搜索、可高亮”的组件（如 Select2、React-Select、Element Plus 的 el-select），底层都是用 <div> + <code><input> + <ul></ul> 重写的。原生 <select></select> 的样式和行为在各浏览器中锁定，无法用 CSS 控制下拉面板。
如果必须自定义，关键取舍点：
- 放弃
<select><option></option></select>的原生表单提交能力（需手动同步 value 到隐藏<input>） - 需自行处理键盘导航（
ArrowDown/Enter/Escape）、焦点管理、屏幕阅读器aria-expanded和aria-haspopup - 移动端点击区域要够大（至少 44×44px），否则触控失败率高
最简可控方案：用 <details></details> + <summary></summary> 模拟基础展开
如果不强求下拉式、只要“点一下展开选项列表”，<details></details> 是语义正确、零 JS、兼容性够用（Chrome 12+、Firefox 49+、Safari 15.4+）的轻量替代。
<details><summary>请选择</summary><ul role="list">
<li role="option" tabindex="0">选项一</li>
<li role="option" tabindex="0">选项二</li>
</ul></details>
注意：
- 它不自动绑定表单，value 不会上送，需用 JS 监听
click或keydown更新隐藏域 -
<summary></summary>默认带小三角，可用list-style: none和伪元素重绘 - IE 完全不支持，如需兼容得回退到
<select></select>原生方案
<select></select> 的“点击展开”是浏览器内置逻辑，稳定但不可定制；所有看似“增强”的需求，实际都意味着主动放弃原生能力，转入 DOM 重写和无障碍补全的深水区。别低估 aria-* 属性和键盘流的覆盖成本。
