设height导致自定义箭头被裁切，主因是padding-right不足且background-position未精确对齐；应预留28–32px右内边距，用background-position: right 12px top 50%替代center，配合background-size控制SVG大小，并避免混用line-height。
给 select 设 height 时，自定义箭头会被裁切怎么办
直接设 height: 36px 后发现右上角的自定义箭头被截掉一半——这不是 CSS 写错了，而是 padding-right 没留够空间，同时 background-position 的坐标没对齐。原生 select 的内容区是单行内联盒子，文字+背景图共用同一行高，一旦高度压得太紧，背景图就会溢出或被剪裁。
关键不是“调高”，而是“留白+定位”：
-
padding-right至少留出 24px（建议 28–32px），确保 SVG 箭头有足够横向空间 -
background-position显式写成right 10px center，别依赖right center的模糊计算 - 如果用了
transform: scale(1, 0.9)压缩高度，必须同步增大padding-right，因为缩放会等比压缩背景图位置 - iOS Safari 对
padding-right小于 24px 的select会自动补热区，但视觉上仍可能裁箭头，实测 28px 是安全下限
appearance: none 后，箭头位置在不同浏览器里偏移不一致
Chrome 中箭头居中，Firefox 里偏下，Safari 里又偏右——这是因为各浏览器对 select 内部基线（baseline）的解析不同，而 background-position: center 实际锚点是基线而非盒模型中心。
稳定方案是放弃 center，改用像素级定位：
立即学习“前端免费学习笔记（深入）”；
- 统一用
background-position: right 12px top 50%，再加background-size: 14px auto控制 SVG 大小 - 避免混用
line-height（它对select无效），改用padding-top和padding-bottom分开调垂直留白 - 若需适配暗色模式，内联 SVG 的
fill用currentColor，并确保父级color设置正确，否则箭头变黑/变白不可见
用外层容器包裹时，select 高度变化导致箭头错位
当把 select 套进 <div class="select-wrapper"> 并设 height: 40px，发现伪元素 ::after 绘的箭头没跟着上下居中——因为 select 默认是 vertical-align: baseline，而外层 div 没设 line-height 或 display: flex，导致子元素对齐基准漂移。
修复只需两步：
- 外层
.select-wrapper加display: inline-flex或display: flex，再配align-items: center -
select本身设flex: 1或width: 100%，避免宽度塌陷挤压箭头空间 - 伪元素
::after的top改用50%+transform: translateY(-50%)，比固定top: 12px更可靠
移动端点击区域太小，缩放 select 后箭头模糊或失真
为满足 iOS 最小 44×44px 触摸热区要求，有人用 transform: scale(1.2) 放大整个 select，结果 SVG 箭头边缘发虚，甚至在 Chrome 120+ 被 Lighthouse 标记为“form elements not scalable”。
真正兼顾可访问性与清晰度的做法是：
- 保持
select原始尺寸（如 36px 高），仅用padding扩展点击热区：比如padding: 12px 16px，让总高度达 48px - SVG 箭头用
background-size: 16px auto，配合right 14px center，确保在放大热区后仍精准落位 - 禁用
user-scalable=no，否则强制缩放会破坏所有自定义样式逻辑
最易被忽略的一点：无论用背景图还是伪元素，只要 select 高度变了，箭头的垂直锚点就必须重算——它不随容器自动居中，得靠 padding、transform 或 flex 显式固定。
