直接设 height 对 无效，因浏览器将其视为原子控件，仅顶部区域响应 height，下拉菜单由系统绘制且 css 无法干预；max-height 应加在父容器上，用 padding 控制视觉高度最稳妥；完全控制需放弃原生 ，改用 aria 增强的自定义组件。
为什么直接设 height 对 <select></select> 无效
因为浏览器把 <select></select> 当作原子控件：顶部可样式化区域（你调的 height 只影响它），而下拉弹出菜单是系统级 UI 绘制，CSS 完全穿透不了。你在 Chrome 或 Edge 里写 height: 32px，只会压扁按钮区，点开后菜单依然默认显示 8–10 行，行高、滚动条、项间距全不受控。
Firefox 稍友好些，但行为不稳定；iOS Safari 和 Android Chrome 基本无视所有对 <option></option> 的尺寸干预。这不是你 CSS 写错了，是浏览器故意不让你动。
max-height + overflow-y: auto 要加在父容器上
想让长列表出现滚动条，别往 <select></select> 上硬套 max-height——多数浏览器会忽略，或导致聚焦异常、滚动卡顿。正确做法是包一层 <div class="input-group">，然后给这个容器设限制：
<pre class="brush:php;toolbar:false;">`.input-group {
max-height: 200px;
overflow-y: auto;
}`</pre>
<p>这样既保留原生 <code><select></select> 的语义和可访问性，又让溢出内容可滚动。注意两点：
-
max-height值建议按实际选项数估算，比如每项视觉高度约 32px，6 项就设200px左右 - 移动端需额外测试：iOS Safari 对
overflow-y: auto在非-webkit-overflow-scrolling: touch容器中可能不触发惯性滚动
用 padding 控制可见区域“视觉高度”最稳妥
line-height 对 <select></select> 无效，但 padding 有效且兼容性极好。它能撑开选中区，同时让文字自然垂直居中：
`select {
padding: 8px 12px;
font-size: 14px;
border: 1px solid #ccc;
}`
关键细节：
- 不要只设
padding-top/padding-bottom，否则文字可能偏上或偏下 - 如果配合
appearance: none自定义箭头，记得重置background和padding-right避免文字被遮挡 - Windows 高对比模式下，
padding不会影响可访问性，比transform: scale()更安全
真正要完全控制？必须放弃原生 <select></select>
当设计要求统一行高、自定义悬停色、支持键盘导航、或需要适配无障碍强制缩放时，原生控件已到极限。此时应基于 <div> + <code><button></button> + <ul></ul> 实现：
核心不可省步骤：
- 用
aria-expanded和aria-controls关联触发器与菜单 - 点击外部时监听
document.addEventListener('click')并关闭，不能只靠blur - 必须支持
ArrowDown/ArrowUp移动焦点、Enter确认、Escape关闭 - 移动端需处理
touchstart防止误触穿透
这一步绕不开 JS，但换来的是尺寸、动画、状态、无障碍的完全自主权——尤其在 Chrome 120+ 对缩放表单元素发出可访问性警告后，自定义方案已成事实标准。
