用 appearance: none 及其前缀清除 select 默认外观并隐藏箭头，需配合 ::-ms-expand { display: none } 兼容 IE10/11，同时调整 padding-right 和 background-position 避免文字遮挡，并重置 outline、border 和 background-color 以保障样式与可访问性。
直接用 appearance: none 配合 ::-ms-expand 就能隐藏默认箭头，但必须处理好浏览器兼容性和 padding 冲突，否则图标错位或文字盖住箭头。
用 appearance 清除原生外观
这是最核心的一步：appearance: none 会剥离浏览器对 select 的默认渲染逻辑，包括边框、圆角、箭头等。但注意它不是单靠一个声明就能跨浏览器生效：
-
-webkit-appearance: none必须写在前面，覆盖 Chrome/Safari -
-moz-appearance: none对 Firefox 有效（Firefox 34+） -
appearance: none是标准写法，但 IE 完全不支持 - 只写
appearance: none而不加前缀，会在 Safari 或旧版 Chrome 中失效
IE10/11 必须额外处理 ::-ms-expand
即使加了所有 appearance 前缀，IE10 和 IE11 仍会固执地显示原生箭头——这是独立于 appearance 的伪元素。必须显式隐藏它：
- 写
select::-ms-expand { display: none; }，不能省略display: none - 这个伪元素只在 IE10/11 生效，其他浏览器忽略，所以可安全共存
- IE9 及更早版本不支持
::-ms-expand，也无法隐藏箭头；如果还要兼容 IE9，只能放弃纯 CSS 方案，改用 div 模拟
自定义箭头时，padding-right 和 background-position 要配平
移除原生箭头后，你通常会用 background-image 加个 SVG 或 PNG 箭头。这时候容易出问题：
立即学习“前端免费学习笔记（深入）”；
-
padding-right必须足够大，否则文字会盖住箭头；一般至少20px起步 -
background-position推荐用right center或具体数值如96% center，避免因字体缩放或 zoom 导致偏移 - 不要用
background: url(...) no-repeat right 50%这种写法——right和50%同时出现时，部分旧版 Safari 解析异常 - 内联 SVG（如
data:image/svg+xml）比外部图片更可靠，避免加载失败导致空白
别忘了重置 focus 和 border 样式
清除 appearance 后，很多浏览器会保留自己的 focus outline 或 border 样式，视觉上显得“没清干净”：
-
outline: none可以去掉点击时的蓝色外框，但请确保用box-shadow或border提供替代焦点提示，否则影响可访问性 -
border必须显式设置，否则 Chrome 下可能只剩一条细线，Firefox 下可能完全无边框 - 如果用了
background-image，记得设background-color，防止图片加载失败时背景透出
真正麻烦的不是“怎么写”，而是“在哪写”：这些样式必须作用在 select 元素本身，不能只写在父容器上；而且一旦用了 appearance: none，就等于放弃了系统级下拉菜单的某些渲染优化（比如 macOS 上的原生动画），这点在高 DPI 屏幕或缩放比例非 100% 时特别明显。
