appearance: none不能直接跨浏览器统一箭头，因Chrome/Safari需-webkit-appearance、Firefox需-moz-appearance、IE/Edge旧版需select::-ms-expand{display:none}，且Safari（尤其iOS）对该属性支持极弱，点击仍弹系统选择器；最稳方案是用background-image替换箭头，并配合padding-right≥36px、data URL SVG、单位化background-position等细节处理。
为什么 appearance: none 不能直接跨浏览器统一箭头
因为 appearance 属性在各浏览器中行为不一致：Chrome 和 Safari 支持 -webkit-appearance: none，Firefox 需要 -moz-appearance: none，而 IE/Edge 旧版必须用 select::-ms-expand { display: none; } 才能隐藏原生箭头。更关键的是，Safari（尤其是 iOS）对 appearance: none 的支持极弱——即使加了，点击后仍弹出系统原生选择器，箭头根本不可控。
用 background-image 替换箭头的实操要点
这是目前兼容性最稳、无需 JS 的方案，但要注意细节：
-
padding-right必须留足空间（建议 ≥ 36px），否则自定义箭头会被截断 - SVG 箭头推荐用 data URL 写进
background-image，避免额外请求，例如：url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 5l4 4 4-4' stroke='%23666' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") - Firefox 中
background-position的right值需带单位（如right 10px），写成right 10会失效 - IE11 不支持
background-size，若需兼容，改用固定尺寸 PNG 或放弃该属性
聚焦/禁用状态下的箭头旋转与灰度处理
纯 CSS 无法监听下拉展开事件，所以“箭头向下 → 向上”的动态效果必须靠 JS 驱动。但可简化为最小干预：
- 给
select外层加position: relative容器，把<img>或伪元素放在容器内，用transform: rotate()控制旋转 - 聚焦时用
select:focus ~ img（兄弟选择器）触发旋转，但注意 Firefox 不支持:focus在select上的冒泡，得绑定 JS 的focusin/focusout - 禁用状态（
select[disabled]）下，建议同时加opacity: 0.6和filter: grayscale(100%)，确保箭头视觉同步变灰
真正统一的底线：别强求“完全一样”，接受分层策略
Chrome/Firefox/Edge 可以做到箭头图标、尺寸、动效一致；Safari（尤其移动端）只能保证基础可读性和点击区域正常——它会无视 appearance 和大部分 background 设置，坚持用系统原生弹窗。这时候强行 JS 模拟反而破坏可访问性。真正的统一不是像素对齐，而是交互反馈一致：用户知道点哪、选中后有明确视觉响应、键盘 Tab 能进入、空格/回车能展开。剩下的样式差异，交给用户操作系统去负责。
立即学习“前端免费学习笔记（深入）”；
