CSS 的 height 对原生 select 无效，需用 line-height + padding + box-sizing 控制视觉高度；固定下拉列表高度必须用 JS 自定义或 size 属性（但会失去下拉行为），移动端受限于系统控件。
直接设置 select 高度在多数浏览器中无效
你试过给 select 元素加 height: 40px 吗？大概率没反应——因为原生下拉框的渲染高度由操作系统或浏览器 UI 控件决定，CSS 的 height 对它基本不起作用（Chrome/Firefox/Safari 均如此）。强行设高可能只撑开外层容器，内部选项区域仍按默认高度展开。
用 line-height + padding 挤出视觉高度
这是最轻量、兼容性最好的方案，适用于纯 CSS 调整外观，不改变交互逻辑：
-
line-height必须与height一致（如都设为40px），才能垂直居中文字 - 加
padding可微调上下留白，但总高度 =height+padding-top+padding-bottom，需同步调整line-height - 必须设
box-sizing: border-box，避免 padding 导致整体变高 - Firefox 下若文字被截断，可加
vertical-align: middle
select {
height: 40px;
line-height: 40px;
padding: 0 12px;
box-sizing: border-box;
vertical-align: middle;
}
真正固定下拉展开区高度要用 size 属性
原生 select 的下拉弹出面板（即选项列表）高度无法用 CSS 精确控制，但可通过 size 属性限制**同时可见的选项行数**，间接影响展开高度：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
-
<select size="5"></select>会让下拉框以多行列表形式常驻显示 5 条选项，此时 CSSheight才生效 - 但这会失去“点击才展开”的下拉行为，变成类似
<textarea></textarea>的静态列表 - 如果坚持要下拉 + 固定展开高度，必须用 JS 自定义下拉（如
select2、choices.js），或改用details/summary+ 列表模拟
移动端 Safari 和部分安卓 WebView 有额外限制
iOS 上的 select 会强制调用系统选择器（滚轮 Picker），任何 CSS 高度设置都会被忽略；安卓某些 WebView 也会降级为原生控件。这时：
- 不要依赖
height或max-height控制弹出层 - 若业务强依赖固定高度体验，建议检测
navigator.userAgent，对移动设备降级为自定义下拉组件 - 用
appearance: none隐藏默认箭头后，必须手动添加背景箭头图标，并确保点击热区覆盖整个元素
真正能稳定控制“下拉展开后列表高度”的只有 JS 方案；CSS 能做的，只是让下拉框本体看起来更高或更矮——这点容易混淆，动手前先确认你要固定的到底是“按钮高度”还是“弹出菜单高度”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
