原生的高度和字体无法独立精确控制，因其被浏览器拆分为可部分样式化的选中区和操作系统绘制的黑盒弹出菜单；真正可控的仅有选中区，需用padding、appearance: none、系统字体栈等组合重置，而完全自定义需放弃原生标签并实现aria交互。
原生 <select></select> 的高度和字体无法独立、精确控制：高度受系统限制，字体继承不稳定；真正可控的只有选中区（按钮区），弹出菜单是黑盒。
为什么 height 和 font-size 在 <select></select> 上表现混乱
浏览器把 <select></select> 拆成两层：顶部“选中区”可被部分 CSS 影响，底部弹出菜单由操作系统绘制，不在 DOM 中，CSS 完全失效。你设 height: 40px，只压扁按钮区；设 font-size: 16px，可能在 Chrome 生效，在 Safari 却被忽略——因为字体渲染路径不同，且 <option></option> 根本不继承父级 font-size。
-
line-height对<select></select>本身基本无效，对<option></option>完全无效 -
padding是唯一稳定影响按钮区视觉高度的方式（如padding: 8px 12px） - iOS Safari 强制最小触摸热区为
44×44px，font-size太小 +height太矮会导致点不中
怎么让按钮区高度和字体看起来统一又可用
目标不是“完全一致”，而是“在各端可读、可点、不突兀”。关键靠组合重置：
- 必须设
box-sizing: border-box，否则height不包含border和padding - 用
appearance: none和-webkit-appearance: none剥掉系统外壳，再手动加箭头（如background: url("data:image/svg+xml,...")） - 显式声明
font-family和font-size，避免继承断裂；推荐使用系统字体栈：font-family: "Segoe UI", "Microsoft YaHei", sans-serif - 把
<select></select>和<input type="text">包进display: flex; align-items: center容器，比单个调参更稳
想真正控制下拉菜单里的字体和行高？只能自定义
原生 <option></option> 不响应任何字体或高度相关样式。若设计要求「每项 48px 高 + 图标 + 14px 字体 + hover 背景」，就必须放弃 <select></select>：
- 结构用
<div class="custom-select"> <button></button><ul role="listbox"><li role="option"></ul> </div> -
<ul></ul>设max-height: 200px; overflow-y: auto，<li>设line-height: 28px或padding: 6px 12px，字体完全自由 - 必须同步实现：
aria-expanded、键盘导航（ArrowDown/Enter）、外部点击关闭、disabled状态透传 - 移动端需
touchstart+preventDefault()消除 300ms 延迟，否则点击无响应
别碰但常被误试的“伪方案”
这些操作看似能改，实则埋雷：
-
transform: scale(1, 0.8)缩放整个<select></select>：会触发 Chrome 120+ 可访问性警告，文字缩放后边缘模糊，iOS 下热区不足仍点不中 -
size="4"强制显示 4 行：虽是原生有效方案，但交互变成“列表模式”，失去点击展开行为，且移动端（尤其 iOS）可能直接无视，跳转全屏选择器 -
option { font-size: 12px; }：所有浏览器静默忽略，DevTools 里样式明明存在，但毫无效果
真正需要统一字体与高度的场景，本质是在挑战浏览器能力边界——接受这个前提，才能选对路：要么妥协用 size 或 padding 微调按钮区，要么投入 JS + ARIA 实现完整自定义。没有中间态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
