IE 11 中 select 箭头不消失是因为 appearance: none 对其无效，必须单独设置 select::-ms-expand { display: none; } 才能清除顽固小三角，且需手动调整 padding-right 和 background-position 以避免错位或空白。
IE 11 中 select 箭头为何不消失
因为 appearance: none 在 IE 11 及更早版本中完全无效，它只对 ::-ms-expand 这个伪元素起作用——而这个伪元素才是 IE 里那个顽固小三角的真正载体。你写了 appearance: none 却没碰 ::-ms-expand，等于没动关键开关。
select::-ms-expand 必须显式设为 display: none
这是 IE（Edge Legacy）唯一可靠的清除方式，且必须单独写、不能合并进其他选择器。常见错误包括：
- 漏写
::-ms-expand规则，或拼错为::-ms-expand（注意是双冒号） - 把它和
select写在同一行样式里，比如select { appearance: none; ::-ms-expand { display: none; } }—— CSS 不支持嵌套写法 - 加了
!important但没加在display: none上，导致被其他规则覆盖
正确写法就是独立一行：
select::-ms-expand {
display: none;
}
为什么加了 ::-ms-expand 还有空白或错位
因为清除箭头后，IE 默认仍保留右侧内边距（padding-right），视觉上像“留了个坑”。这时必须手动重置：
立即学习“前端免费学习笔记（深入）”；
-
padding-right要根据实际内容调整，通常设为12px～20px，避免文字贴边 - 如果用了自定义背景箭头（如 SVG 或 PNG），要确保
background-position的横坐标与padding-right匹配，否则图标会偏移或被裁切 - 某些 IE 版本下
height和line-height不一致会导致垂直居中异常，建议统一用height控制，并设line-height: normal
兼容性兜底：当 appearance 和 ::-ms-expand 都失效时
极少数旧项目运行在 IE 9–10（已不支持 ::-ms-expand），此时只能放弃纯 CSS 方案：
- 用
<div class="select-wrapper"> 包裹 <code>select，再用::after在右侧绝对定位一个自定义箭头 - 给
select加opacity: 0+position: absolute，让它透出但可交互，视觉层由 wrapper 和伪元素承担 - 务必测试键盘导航（Tab / Space / Arrow keys），这种包裹方案容易破坏原生焦点逻辑
真正难的不是去掉箭头，而是去掉之后，还让整个控件在所有浏览器里高度一致、焦点可见、屏幕阅读器可识别——这些细节一旦忽略，修复成本远高于一开始多写几行重置样式。
