height属性仅控制select可见选中区高度，不影响下拉菜单；下拉菜单由系统级渲染层管理，CSS无法干预；需用padding+box-sizing精确控高，或改用自定义组件实现完整控制。
height 属性对原生 <select> 元素不产生可预测的“行高”或“内容高度”控制效果，所谓“计算值”在 CSS 中虽能返回（如 getComputedStyle(select).height），但它只反映**可见选中区的渲染高度**，和下拉弹出菜单的实际高度无关。
为什么 getComputedStyle(select).height 不等于下拉菜单高度
浏览器将 <select> 拆成两个独立渲染层：顶部可样式化区域（受 height、padding 影响），和底层系统级弹出菜单（由 OS 或 UA 控制，CSS 无法穿透）。你用 JS 读到的 height 值，只是前者，比如 "40px"；而点击后弹出的菜单可能显示 7 行、每行 28px，总高约 196px —— 这个值既不可读，也不可设。
-
size属性是唯一能影响原生下拉项数的 HTML 属性，例如<select size="5">会让下拉默认展开显示 5 行（非弹出模式，而是多行列表模式） -
size在multiple场景下才真正生效；单选<select>设size会强制切换为多行列表外观，通常不符合设计预期 - Chrome 120+ 对
transform: scale()缩放后的<select>会报 Lighthouse 可访问性警告，且缩放不影响弹出菜单尺寸
想让下拉菜单“看起来更高/更矮”，实际可用的 CSS 组合
目标是调整用户看到的选中区高度，并尽可能让文字垂直居中、视觉协调。以下组合在 Chrome/Firefox/Edge 中稳定有效：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 用
padding替代line-height：padding: 10px 12px是最兼容的方式，文字自动垂直居中，且不会触发 UA 样式冲突 - 配合
box-sizing: border-box+ 显式height精确控高：height: 42px; box-sizing: border-box; padding: 10px 12px - 禁用原生箭头后自定义高度：
appearance: none+background箭头图 + 左右padding预留空间，此时高度完全由你定义 - 避免单独设
line-height：<select>是替换元素，该属性被忽略，白写
需要真实控制下拉菜单高度？必须放弃原生 select
如果你的需求是：固定最大高度 + 滚动 + 每项 36px 高 + 键盘上下键逐行聚焦 —— 原生 <select> 无法满足。此时唯一可靠路径是模拟：
立即学习“前端免费学习笔记（深入）”；
- 用
<div class="custom-select">包裹<button>（触发区）和<ul role="listbox">（选项区） -
<ul>设max-height: 200px; overflow-y: auto，每一项<li role="option">设height: 36px，完全可控 - 必须手动处理
Escape关闭、ArrowDown移动焦点、Enter确认，否则键盘用户无法使用 - iOS Safari 对触摸热区有最小 44×44px 要求，自定义组件里
button的min-height和min-width别低于这个值
真正麻烦的不是怎么写，而是哪些地方不能“以为有效”——比如给 <option> 加 padding、在 <select> 上设 line-height、或指望 height 能撑开弹出层。这些在所有主流浏览器里都无效，但错误代码往往还能“看起来差不多”，直到在 iOS 或高对比模式下彻底失效。
