高度不能用height直接控制，应通过padding、font-size等组合调整；下拉面板高度无法css控制，需js模拟；size仅对multiple有效；ios safari中css高度无效。
下拉列表 <select></select> 的高度不能用 height 直接控制
浏览器对 <select></select> 元素的渲染高度有强约束，直接设 height: 40px 在多数浏览器（尤其是 Chrome / Edge）中会被忽略，只影响外框，不改变下拉弹出面板的高度或选项行高。真正起作用的是 font-size、padding 和 line-height 的组合，且仅对“未展开状态”的可见区域有效。
常见错误现象：height 设了没反应、下拉箭头被裁剪、选项文字贴边看不清。
-
height属性在<select></select>上属于“建议性”，实际渲染由 UA 样式主导，不要依赖它 - 想让下拉框“看起来更高”，优先调
padding（如padding: 8px 12px），比单纯加height更可靠 -
font-size增大后必须同步调整padding，否则文字会溢出或挤压箭头 - Firefox 对
height支持略好，但跨浏览器一致性仍差，不推荐作为主方案
控制下拉弹出面板（dropdown menu）高度只能靠 JS 模拟
原生 <select></select> 的下拉面板是操作系统级控件（Windows 下是 ComboBox，macOS 是 NSPopUpButton），CSS 完全无法触达其内部结构。你看到的“下拉高度”其实是系统根据选项数量自动计算的，没有对应 CSS 属性可改。
真实使用场景：需要固定显示 5 行选项、滚动条位置可控、支持自定义样式（比如带图标、分组线）。
- 必须放弃原生
<select></select>，改用<div> + <code><ul></ul>+<li>手动实现下拉逻辑 - 关键控制点：
max-height+overflow-y: auto作用于下拉容器（如.dropdown-menu） - 需用 JS 绑定点击/焦点事件来 show/hide 面板，并处理键盘导航（
ArrowDown、Enter等） - 无障碍（a11y）不可省：要加
role="listbox"、aria-expanded、aria-activedescendant - 仅当明确需要多选且希望限制可视行数时才用
size，例如：<select multiple size="4"></select> - 搭配
height使用无意义，size本身已决定高度（基于行高 × 行数） - 响应式下
size值固定，不如 CSSmax-height灵活，慎用于移动端 -
padding：控制文字到边框的距离，最直接影响“视觉高度”，推荐从padding: 6px 12px开始调 -
font-size：增大字号会撑开整体，但注意 Safari 下font-size小于 12px 可能被强制重置 -
border和border-radius：圆角过大会导致下拉箭头错位，border-radius: 4px是安全值 -
appearance: none+ 自定义背景箭头：移除原生箭头后，可用background-image插入 SVG，再用padding-right腾出空间
size 属性只对多选 <select multiple></select> 有效
size 是 HTML 原生属性，但它只在 multiple 模式下生效，表示“同时可见的选项行数”。单选 <select></select> 设置 size="5" 不会变成下拉面板高 5 行，而是强制显示为一个 5 行高的滚动列表（类似 <textarea></textarea>），失去下拉交互语义。
典型误用：想让单选下拉默认展开 5 行，结果页面上出现一个丑陋的长方块，用户还得手动滚动找选项。
真正能微调的 CSS 属性就这几个
别折腾没用的属性，聚焦以下四个，它们在所有主流浏览器中行为一致：
容易被忽略的细节：iOS Safari 里，<select></select> 点击会触发全屏原生选择器，任何 CSS 高度设置都无效——这时候只能接受系统行为，或彻底换用 JS 下拉组件。
