height仅影响select顶部触发区，无法控制下拉菜单高度，因弹出菜单由系统独立绘制且不在dom中；唯一可靠方案是用div+button+ul完全自定义，并确保aria属性和移动端兼容性。
height 对原生 <select></select> 元素只影响顶部选中区域，无法控制下拉弹出菜单的高度——这是浏览器和操作系统的底层限制，不是 CSS 写得不够细。
为什么 height 看似生效却改不了下拉高度
浏览器把 <select></select> 拆成两部分：顶部可样式化的“触发区”（height 能起作用），和独立绘制的“弹出菜单”（不在 DOM 中，CSS 完全失效）。你在 Chrome DevTools 里看到的 height: 40px，只是压扁了按钮区；点开后菜单仍按系统默认行高显示 8–12 行，超出就加滚动条，你没法用 max-height 或 overflow 干预它。
能临时“看起来更高/更矮”的轻量方案
如果只是 UI 微调、不追求精确控制下拉项数或滚动行为，可用以下方式：
-
transform: scale(1, 0.8)缩放整个<select></select>，配合transform-origin: top center和margin-top补偿位移 —— 注意会同步缩放文字和边框，需手动调font-size -
padding+line-height组合撑高触发区（如padding: 10px 12px+line-height: 1.2），但 Firefox 支持较好，Safari 可能忽略line-height -
appearance: none隐藏原生箭头后，用::after伪元素画自定义图标 —— 这不改变下拉高度，但让整体视觉更可控
真正能设下拉菜单高度的唯一路径
放弃原生 <select></select>，用 <div> + <code><button></button> + <ul></ul> 模拟，JS 控制显隐与选中：
- 下拉容器（
<ul></ul>）设position: absolute+max-height: 200px+overflow-y: auto，高度完全自由 - 必须加
role="listbox"和每个<li>的role="option"+aria-selected，否则屏幕阅读器无法识别 - 移动端需监听
touchstart并preventDefault()，否则 300ms 延迟会导致点击失效 - 超过 30 项时，别硬堆
max-height，要加搜索过滤或虚拟滚动，否则渲染卡顿、焦点管理崩坏
最常被忽略的一点：iOS Safari 要求触控热区至少 44×44px，强行缩小自定义下拉按钮会导致点不中；Chrome 120+ 会对 transform 缩放的表单控件报可访问性警告——所谓“改高度”，本质是权衡控制力、兼容性和无障碍支持。
