height css属性对原生无效或不可靠，仅影响选中区；size属性可稳定控制可见选项行数，如size="4"显示4行且可滚动。
原生 <select></select> 的 height 和 size 到底管不管用
直接说结论：height CSS 属性对原生 <select></select> 无效或不可靠，尤其在 Chrome/Edge 中——它只能压扁顶部选中区，弹出菜单高度、行数、滚动行为完全不受控。size 属性才是唯一能稳定控制“可见选项行数”的原生方案，比如 size="4" 会强制显示 4 行 <option></option>，且保持可滚动。
常见错误现象：
- 设了
height: 40px，点击后弹出菜单却还是高得离谱，甚至出现双滚动条 - 加
line-height或padding到<option></option>，毫无反应（浏览器根本不解析） - 用
appearance: none隐藏箭头后以为能自由控制，结果下拉层依然按系统默认渲染
使用场景建议：
- 仅需简单表单、兼容性优先 → 用
size属性，配合multiple可多选 - 想微调选中区视觉高度 →
height + padding + box-sizing: border-box组合，但别指望影响弹出层 - 移动端必须点中 → iOS 要求触摸热区 ≥ 44×44px，
size="1"+ 强行缩放会失效
max-height 动画展开时为什么下拉内容不推挤下方元素
因为很多人误用 position: absolute 实现下拉层，导致它脱离文档流。一旦脱离，高度变化就不会触发下方内容重排，动画再顺滑也和页面其他部分“不同步”。
真正能推动下方内容平滑移动的解法是：保持下拉容器为 position: relative（或默认 static），用 max-height + overflow: hidden + transition 控制高度渐变。
关键实操点：
-
max-height必须设为固定值（如250px），不能用auto或fit-content，否则过渡失效 - 值要略大于最大可能内容高度（比如最多 8 项 × 每项 32px ≈ 256px，就设
max-height: 280px） - 同时配
overflow-y: auto，确保内容超长时仍可滚动，且不破坏动画节奏 - 避免混用
visibility: hidden—— 它不可动画，会打断过渡连贯性
自定义下拉组件里怎么让选项高度可控
放弃原生 <select></select> 后，用 <div> + <code><ul></ul> + <li> 模拟，所有尺寸才真正归你管。
核心控制点：
-
<ul></ul>上设max-height和overflow-y: auto，而不是父<div> <li> <code><li>用padding或height + line-height精确控制单行高度（line-height在这里完全有效） - 文字垂直居中优先用
display: flex; align-items: center，比line-height更稳 - 若选项超 30 条，必须加虚拟滚动（如
react-window）或搜索过滤，否则卡顿明显 - 键盘导航（
ArrowDown/Enter/Escape）不是可选项，是可访问性硬要求 - 移动端点击外部关闭，得监听
document.addEventListener('click')，不能只靠blur - 高对比模式下，自定义背景/文字色若没手动适配，整个菜单可能变成一片黑或白
- 父级容器（如
<li class="dropdown">）必须有position: relative，否则bottom: 100%失效 -
<li>和<a></a>标签也要加transform: scaleY(-1)，否则文字倒置 - 箭头图标（如
::after）同样要翻转，不然指向错乱 - @media 查询里记得重置，横屏时可能又需要切回
top: 100%
容易被忽略的细节：
下拉菜单贴边时怎么自动翻转展开方向
当原生或自定义下拉菜单靠近视口底部，继续向下展开会被裁切。纯 CSS 就能解决，无需 JS 判断位置。
做法很简单：把原本的 top: 100% 改成 bottom: 100%，再用 transform: scaleY(-1) 翻转整个菜单容器，同时反向翻转内部文字和图标。
必须同步处理的点：
最常被跳过的一步：用 :focus-within 替代 :hover，否则手机点一下就收起，根本没法选。
