直接控制 select 元素的 height 不可靠，因浏览器渲染差异大且下拉面板不受影响；用 size 属性控制可见选项数最稳妥，兼容性好、语义明确；移动端原生选择器会忽略 size，跨端一致需自定义组件。
直接控制 select 元素的 height 不可靠
浏览器对原生 select 的高度渲染差异极大：Chrome 和 Firefox 通常只响应 height，但 Safari 可能忽略，IE/Edge 更倾向于用内部行高撑开；且下拉弹出面板（popup）完全不受该样式影响。所以单纯设 height: 40px 只能调整输入框区域，无法约束选项列表高度。
用 size 属性控制可见选项数最稳妥
size 是 HTML 原生属性，语义明确、兼容性极好（IE6+ 支持），它直接决定下拉框以“列表框”形式显示时的可见行数，天然带滚动条：
<select name="category" size="5"> <option value="1">选项一</option> <option value="2">选项二</option> <!-- 更多选项... --> </select>
- 设
size="1"→ 恢复为默认下拉弹出式（此时height仍可能失效） - 设
size="4"→ 固定显示 4 行，超出自动滚动，无需 JS 或额外 CSS - 不推荐设过大值（如
size="20"），会破坏页面流布局，尤其在小屏幕中
若必须用弹出式下拉，容器限制是唯一可行方案
原生 select 弹出面板无法用 CSS 选中或样式化，但你可以包裹一层容器，用 max-height + overflow 约束其父级布局空间，再配合 JS 模拟展开逻辑（非必需）：
<div class="select-container"> <select name="city">...</select> </div>
CSS 部分：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
.select-container {
max-height: 200px;
overflow: hidden;
}
.select-container select {
width: 100%;
}- 这个
max-height不影响弹出面板本身，但能防止它撑开父容器导致布局错乱 - 真正限制弹出面板高度？做不到——这是浏览器 UA 样式控制的私有区域
- 想完全自定义高度和滚动行为？必须放弃原生
select，改用div+ul+js模拟
公共 CSS 类命名建议与陷阱
统一管理时，避免用泛义类名如 .dropdown，容易和 JS 插件或导航菜单冲突。推荐语义化前缀：
- 用
.form-select-sm表示紧凑型（size="3"+ 小字体） - 用
.form-select-lg表示大尺寸列表（size="8"） - 禁止在公共类里写
height或line-height直接作用于select，不同项目字体栈不同，会导致基线错位 - 如果项目已用 Tailwind 或 Bootstrap，优先复用其
form-select相关工具类，而非覆盖
最常被忽略的一点：所有基于 size 的方案，在移动端 Safari 和 Android Chrome 中仍会触发原生选择器（iOS 的滚轮 picker），此时 size 完全无效——真要跨端一致，只能上自定义组件。
