直接设 height 无法对齐输入框，因 select 是替换元素，height 仅作用于选中区，弹出菜单高度不可控，且各浏览器 ua 样式差异大；input 默认 vertical-align: baseline，select 多为 middle，导致对齐失效。
为什么直接给 select 设 height 无法对齐输入框
因为 select 是替换元素，它的渲染被拆成两部分：顶部可样式化的“选中区”和底层系统级弹出菜单。你设的 height: 36px 只影响前者，而弹出菜单的高度、行高、滚动条完全不受控。更麻烦的是，不同浏览器对 select 的 UA 样式差异极大——Chrome 和 Edge 默认用 OS 原生下拉，Firefox 偶尔响应 padding，Safari 几乎无视所有高度相关样式。
input 和 select 同行时垂直对齐失效的真正原因
它们默认 vertical-align 值不同：input 是 baseline（对齐文本底线），select 在多数浏览器里是 middle 或未明确定义；再加上 line-height、padding、border 的隐式差异，即使都设了 height: 36px，视觉上也会一高一低。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 统一设
vertical-align: middle是最轻量解法，但仅解决“静止状态”的对齐，不保证点击后下拉菜单与输入框底边对齐 - 若父容器用了
display: flex，必须确保align-items: center，否则vertical-align会被忽略 - 避免混用
line-height控制高度——它对select无效，对input也只在无height时起作用
真正能保持高度一致的两种可靠方案
如果只是视觉对齐且接受原生行为，优先用 padding + box-sizing 组合；如果需要下拉菜单本身也严格匹配输入框尺寸（比如嵌入搜索框右侧），必须放弃原生 select，改用自定义结构。
-
轻量方案（推荐用于表单字段）： 给
select设height: 36px+box-sizing: border-box+padding: 8px 12px，再给同级input设完全相同的三者，最后加vertical-align: middle -
可控方案（推荐用于 Combobox）： 用
div.input-wrapper包裹input和一个模拟下拉按钮，把真实select隐藏（opacity: 0; position: absolute），所有交互和尺寸由 JS 控制；此时ul.dropdown-options的max-height和padding完全自由，可精确匹配输入框高度 - 不要试图用
transform: scale()强行缩放select——文字会模糊，焦点框错位，无障碍属性易丢失
移动端和无障碍场景下容易被忽略的细节
iOS Safari 和 Android Chrome 对原生 select 的弹出层有强干预：用户点击后，系统会强制全屏或半屏展开，完全绕过 CSS 尺寸控制。这意味着你在桌面端调好的“高度一致”，在手机上根本不存在。
- 若项目需支持移动设备且强调一致性，
select必须降级为自定义组件，不能依赖appearance: none+ 伪元素这种“半自定义”方式 - 用
aria-expanded、aria-controls、role="combobox"等属性不是可选项，而是让屏幕阅读器识别“这个输入框关联一个可展开列表”的唯一途径 - 键盘导航（
ArrowDown展开、Escape关闭、Enter确认）必须实现，否则 WCAG 2.1 AA 不达标
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
