直接设 height 会导致 select 与 input 对不齐，因其顶部触发区受 CSS 控制而弹出菜单由系统绘制、脱离文档流，各浏览器内边距、基线、箭头占位不一致。
为什么直接给 select 设 height 在复合表单里总对不齐
因为 select 的顶部触发区和弹出菜单是两套渲染逻辑：前者响应 CSS，后者由系统绘制、完全脱离文档流。你在同一行放 input[type="text"] 和 select，就算都设了 height: 40px，实际高度也常差 2–6px——input 的 border-box 高度可预测，而 select 的内边距、字体基线、箭头占位在各浏览器中不一致。
常见错误现象：
• 表单横向排列时，select 看起来“矮半截”或“顶到上边框”
• Flex 容器里加了 align-items: center，但文字依然上下偏移
• iOS Safari 中 select 触摸热区被裁剪，点不中
- 统一用
box-sizing: border-box+padding: 10px 12px+font-size: 14px作为基准，比硬调height更稳 - 必须加
appearance: none和-webkit-appearance: none剥掉系统外壳，否则 Chrome/Edge 会额外加 2px 内边距 - 用
display: flex包裹整行控件，并设align-items: stretch（不是center），再靠padding微调视觉居中 - iOS Safari 要求最小触控尺寸 ≥ 44×44px，若整体高度压到 min-height: 44px
size 属性在复合表单里怎么用才不突兀
size 是唯一能真正影响“可见选项数量”的原生属性，但它会让 select 变成常驻列表，破坏下拉交互感。在复合表单中强行用 size="4"，容易让单选控件看起来像多选列表，尤其和旁边 input 并排时风格割裂。
使用场景建议：
• 表单字段语义明确为“从固定短列表选一项”，且用户预期是“展开即见全部”（如「国家」「状态」）
• 移动端优先，且不依赖点击展开动画
• 后端已适配 size 导致的多行 DOM 渲染（部分旧框架会把 size > 1 当作 multiple 处理）
立即学习“前端免费学习笔记（深入）”；
-
size="1"理论等效于默认下拉，但 Safari 15–16 会丢失箭头，慎用；推荐显式写size="1"+ 自定义::after箭头 - 搭配
multiple时，size仅控制初始显示行数，不改变提交行为（仍按单值提交，除非后端明确接收数组） - 移动端长列表（>6 项）禁用
size，iOS Safari 可能强制覆盖为全屏选择器，导致size完全失效
自定义下拉组件怎么和 input 对齐高度
当复合表单要求所有控件“视觉等高+行为一致”，比如统一 44px 高、统一圆角、统一边框色，就必须放弃原生 select，用 div+button+ul 模拟。关键不是“怎么画得像”，而是“怎么对齐得准”。
核心实操点：
• 把原生 select 设为 position: absolute; opacity: 0; pointer-events: none;，保留表单语义和提交能力
• 自定义按钮高度 = 44px，用 display: flex; align-items: center; padding: 0 12px; 控制内部文字垂直居中
• 下拉层 ul 必须设 position: absolute; top: 100%; margin-top: 4px;，否则和按钮错位
- 父容器统一设
position: relative，避免下拉层定位漂移 - 每项
li用padding: 8px 12px或height: 44px; display: flex; align-items: center;，不要只依赖line-height - 必须同步
aria-expanded和aria-controls，否则 Lighthouse 会报严重可访问性问题 - 别忘了监听
Escape键关闭、ArrowDown打开、外部点击收起——缺一不可，否则键盘用户无法操作
移动端和高对比模式下最容易漏的三件事
很多团队在桌面端调好了高度，上线后却被 iOS 用户投诉“点不中”，或被 Windows 高对比模式用户反馈“整个下拉是白的”。这些问题不出现在开发机上，但真实存在。
- iOS Safari 要求触控热区 ≥ 44×44px，自定义按钮的
height和padding加起来必须 ≥ 44px，不能只看视觉高度 - Windows 高对比模式下，若自定义下拉没设明确的
color、background-color和border，整个组件可能变成透明或纯黑，用户看不见 - Chrome 120+ 会对任何含
transform: scale()的表单元素报 “form elements not scalable”，且该警告无法屏蔽——这意味着缩放方案已实质淘汰
真正难的不是写出高度一致的样式，而是让这个一致在各种系统级限制下依然可用。一旦涉及可访问性或移动端，size 和自定义之间没有中间路线，只能选一个并彻底执行到位。
