select元素不支持height样式，浏览器会忽略；真正可控的是通过size属性设置展开行数及option的line-height、padding和font-size；需自定义下拉时应替换为div+ul+li等模拟方案。
select 元素本身不支持 height 设置
直接给 <select></select> 写 height CSS 是无效的——浏览器会忽略它。这是 HTML 表单控件的固有行为，尤其在 Chrome、Edge 等 Blink/WebKit 内核中表现明显。Firefox 虽然部分支持，但高度变化常伴随裁剪或滚动异常。
真正起作用的是下拉展开后的弹出菜单（popup），它由操作系统或浏览器原生渲染，无法用 CSS 直接控制尺寸。
能调的其实是 option 的行高和数量
你实际能干预的，是下拉展开后每项 <option></option> 的视觉高度，以及最多显示几行。关键靠这两个配合：
-
size属性：设置<select></select>默认显示多少个选项（非下拉态），值为数字，例如size="5"会让列表始终展开显示 5 行 -
line-height+padding：对<option></option>设置（仅部分浏览器生效，Firefox 支持较好，Chrome 基本忽略） -
font-size：间接影响行高，相对稳妥
示例：
<select size="6"><option>北京</option> <option>上海</option> <option>广州</option></select>
这样就强制展开成 6 行高度，无需点击下拉箭头。
要真正自定义下拉高度？只能换方案
如果你需要精确控制展开区域高度、滚动条样式、甚至搜索过滤，<select></select> 就该被替换了。主流做法是用 div + ul + li 模拟，再用 JS 控制显隐和选中逻辑。
常见选择：
-
React生态：用react-select或@headlessui/react的Select -
Vue：用Element Plus的el-select或naive-ui的NSelect - 纯 JS：监听 click，动态插入
<ul class="dropdown-menu"></ul>，用max-height+overflow-y: auto控制高度
注意：自定义组件会丢失原生 <select></select> 的表单自动提交、无障碍（a11y）支持和移动端原生键盘适配，这些得手动补。
移动端特别注意：iOS Safari 不吃 size
iOS 上 size 属性基本被无视，点击后仍走系统原生选择器（滚轮式），高度完全不可控。此时唯一可靠路径是放弃原生 <select></select>，改用自定义下拉 + <input readonly> 模拟，再用 position: fixed 浮层撑开高度。
顺带一提：appearance: none 只能隐藏箭头，不能解锁高度限制；transform: scale() 会模糊文字且破坏点击区域。
原生下拉的高度控制，本质上是个妥协的艺术——要么接受浏览器规则，要么彻底接管渲染。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
