chrome和edge中隐藏select默认箭头需设-webkit-appearance: none并重置padding-right（至少32px）、background（含自定义图标）及box-sizing，否则文字裁切或样式错位。
Chrome 和 Edge 中如何隐藏 select 的默认箭头
现代 Chromium 内核浏览器（Chrome、Edge、新版 Opera）用 ::webkit-appearance 控制原生样式，直接设为 none 会移除所有默认 UI，包括箭头，但也会导致高度塌陷、边框错位等问题。必须配合重置尺寸和自定义伪元素。
- 必须显式设置
appearance: none（带-webkit-前缀兼容旧版） - 紧接着要重写
padding-right，否则文字可能被裁切——默认箭头占约 20px，建议至少留padding-right: 32px - 如果需要右侧自定义图标，用
background+background-position: right 8px center更可靠，避免伪元素在某些缩放比例下错位 - 别忘了加
background-repeat: no-repeat，否则图标可能平铺
Firefox 下为什么 appearance: none 不生效
Firefox 从 v85+ 才支持无前缀的 appearance: none，且对 select 的支持仍有限制：它不会隐藏箭头，仅影响外框样式。真正起效的是 -moz-appearance: none，但该属性在较新版本中已被废弃，实际应改用 pointer-events: none 配合包裹容器实现“视觉隐藏”。
- Firefox 不响应
appearance: none对select的声明，这是已知行为，不是你写错了 - 稳妥做法是用
position: relative包一层div，内部放select和绝对定位的覆盖层（如span），再给select设opacity: 0或pointer-events: none - 若需保持可访问性，覆盖层必须保留
aria-hidden="true"，且select本身不能设display: none或visibility: hidden
IE11 和旧版 Safari 的兼容处理
IE11 完全不支持 appearance，Safari 13.1 之前需依赖 -webkit-appearance: none，但即使生效，其下拉箭头位置偏移严重。这时只能接受“降级显示”，或改用 JS 驱动的自定义下拉组件（如 choices.js）。
- IE11 下唯一可行方案是用
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0)隐藏select，再用 JS 模拟交互——但成本高，仅限必要场景 - Safari 12–13.0 存在
padding-right失效问题，建议统一用text-indent: 0.01px配合overflow: hidden把箭头挤出可视区（副作用是无法聚焦时看到焦点环） - 所有 hack 都绕不开一个事实：原生
select的渲染权在浏览器手里，强行隐藏必然伴随可访问性或交互退化
无障碍（a11y）和键盘导航的实际影响
隐藏箭头本身不破坏屏幕阅读器读取，但若用 opacity: 0 或 pointer-events: none 而未同步处理焦点管理，会导致键盘用户无法用 Tab 进入、Enter 展开菜单，或 ArrowDown 切换选项。
- 确保
select始终有tabindex="0"（如果被包裹或样式重置后失去焦点能力） - 若使用覆盖层方案，必须监听
keydown并手动转发ArrowUp/Down、Space、Enter到原生select元素 - 不要用
display: none或visibility: hidden隐藏select——这会让 AT（辅助技术）完全忽略它
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
