select设height常“没反应”因浏览器将其视为原子控件：顶部选中区响应height，但弹出菜单为系统级UI，CSS无法穿透；line-height对select和option均无效；可靠方案是height+padding+box-sizing:border-box，并用appearance:none配合SVG箭头实现自定义。
给 select 设 height 为什么经常“没反应”
因为浏览器把 select 当作原子控件：顶部可点击区域（选中区）能被 height 影响，但点开后的弹出菜单是系统级 UI，CSS 完全穿不透。你在 Chrome 或 Edge 里设 height: 40px，可能只压扁了按钮区，弹出菜单依然按默认行高显示 8–10 行，滚动条照常出现。
Firefox 对 height 响应稍好，Safari 几乎无视；line-height 则在所有主流浏览器中对 select 和 option 都无效——它不是普通文本流元素，而是替换元素（replaced element）。
border 和 height 要一起调，但得绕开默认渲染限制
真正可控的组合是：height + padding + box-sizing: border-box。这样能稳定撑开可见区域，让文字视觉居中：
-
padding: 10px 12px比单纯调height更可靠，各浏览器兼容性好 - 必须加
box-sizing: border-box，否则padding会撑大总高度，破坏布局预期 -
border可以自由设置，但圆角（border-radius）在部分 Safari 版本中会导致箭头错位，建议搭配appearance: none使用 - 避免用
outline模拟边框——聚焦时会和真实border叠加，视觉混乱
想彻底控制边框和高度？先关掉原生样式
用 appearance: none 移除系统箭头，再手动补一个 SVG 箭头（内联 data URL 最稳妥），就能放开手脚调尺寸：
.custom-select {
position: relative;
width: 200px;
}
.custom-select select {
width: 100%;
height: 44px;
padding: 10px 40px 10px 12px;
border: 2px solid #3b82f6;
border-radius: 6px;
appearance: none;
background: #fff url("data:image/svg+xml,%3Csvg...%3E") no-repeat right 12px center / 16px;
font-size: 14px;
}
注意：appearance: none 不等于“完全自定义”，它只隐藏箭头和部分边框，弹出菜单依然不可样式化。如果项目要求统一滚动条、固定显示行数或 hover 高亮，就得走纯 JS 模拟方案（div + ul + aria-expanded）。
别忽略 focus 状态和高 DPI 屏幕下的细节
用户点击后焦点边框（:focus）若只靠 outline，在 macOS 或 Windows 高对比度模式下可能被截断或不可见。更健壮的做法是：
- 用
border实现 focus 样式，配合transition平滑变化 - 在
@media (prefers-reduced-motion: reduce)下关闭过渡动画 - 字体大小别低于
14px，否则高 DPI 屏幕上文字发虚，且触控目标太小 - 测试时真机点开，别只看桌面 Chrome DevTools 的模拟器——iOS 上弹出菜单高度永远固定，无法通过 CSS 缩放
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
