原生<select>的height、max-height、line-height对下拉菜单无效，因其弹出层由系统绘制；控高仅能用size属性实现常驻列表，或用<div>+<ul>自定义组件。
原生 <select> 的 height、max-height、line-height 全部对下拉弹出菜单无效——它由操作系统或浏览器 UI 层绘制，CSS 穿不透。真要控高，只有两条路：用 size 属性走“常驻列表”模式，或彻底放弃原生控件，用 <div> + <ul> 自定义。
为什么直接设 height 或 max-height 没用
浏览器把 <select> 拆成两块：顶部可点击区（CSS 可部分影响）和独立弹出的菜单层（系统级黑盒，CSS 完全失效）。你写 height: 32px，只压扁按钮区；点开后菜单仍按默认行高显示 8–10 行，滚动条逻辑、项数、垂直居中全不受控。
-
max-height在<select>上完全被忽略，Lighthouse 会报 “unused CSS” -
<option>不响应height、padding、line-height，iOS Safari 尤其严格 - 强行缩放
transform: scale()只影响按钮区，弹出菜单仍按原始尺寸展开
用 size 属性控制可见行数（最稳原生方案）
size 是唯一跨浏览器生效的 HTML 原生属性，它让 <select> 以“展开列表”形式常驻显示指定行数，此时高度由行数 × 浏览器默认行高决定，滚动稳定、聚焦正常。
- 写法：
<select size="4">→ 展开时固定显示 4 行，超出自动滚动 -
size="1"等效于默认单选下拉，但旧版 Safari 可能丢失箭头，慎用 - 搭配
multiple可多选，但语义仍是单值提交（除非后端明确接收数组） - 副作用：
size值越大，DOM 渲染越重，移动端长列表建议 ≤ 6
自定义下拉组件里怎么真正限高
当设计要求“点击展开 + 固定最大高度 + 自定义行高 + 滚动条样式”，必须用 <div> + <button> + <ul> 模拟。核心是隐藏原生 <select>，用 JS 同步值，并确保可访问性。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 下拉容器（
<ul>）设max-height: 200px+overflow-y: auto—— 这才是真生效的限高 - 每项（
<li>）可用padding: 10px 12px或line-height: 1.5精确控高 - 父容器必须为
position: relative，下拉层用position: absolute; top: 100%定位，否则错位 - 必须监听
Escape、ArrowDown/Up、Enter和外部点击，否则键盘和屏幕阅读器不可用
统一多个下拉框视觉高度的轻量技巧
若只需让所有 <select> “看起来一样高”，不用改结构，靠 transform: scale() + padding 组合最省事：
-
transform: scale(1, 0.8)垂直压缩，配transform-origin: top center和margin-top补偿偏移 - 同步调大
font-size（如从 14px → 16px），避免文字过小 - 更稳做法：统一用
padding: 10px 12px+box-sizing: border-box+appearance: none，再手动加背景箭头 - iOS Safari 要求触摸热区 ≥ 44×44px，硬缩到 32px 就点不中，这点容易被忽略
所谓“整体高度”，本质是两个独立维度：选中区（前端可控）和弹出菜单（系统级不可控）。想真正统一，就得接受要么妥协交互（用 size），要么投入开发成本（自定义）。没有第三条路。
