IE 11 中残留箭头源于 ::-ms-expand 伪元素，需单独设置 select::-ms-expand { display: none; } 并重置 padding-right 和 background-position；Chrome/Firefox 下建议用 flex 替代 transform 实现箭头居中；all: revert 会覆盖自定义样式，应限制作用范围。
appearance: none 之后箭头还在，是没清干净
Bootstrap 4 的 .custom-select 默认加了 appearance: none，但这个声明只对现代浏览器生效；Chrome/Firefox 会隐藏原生箭头，IE 11 完全无视它。你看到的残留箭头，大概率是 IE 11 的 ::-ms-expand 伪元素——它才是那个顽固小三角的真正载体。
必须单独写这一行才能真正清除：
select::-ms-expand { display: none; }
常见错误包括：漏写这条规则、拼错成 ::-ms-expan、或者把它和 select 样式写在同一块声明里（CSS 不支持嵌套写法）。
清掉箭头后右边留白或文字贴边
清除 ::-ms-expand 后，IE 仍保留默认的 padding-right，视觉上像“挖了个坑”。这时要手动重置右侧内边距，并同步调整自定义箭头位置：
立即学习“前端免费学习笔记（深入）”；
-
padding-right建议设为16px～20px，避免文字紧贴右边缘 - 如果用了
background-image替换箭头，确保background-position的横坐标与padding-right匹配，否则图标会偏移或被裁切 - 某些 IE 版本下
height和line-height不一致会导致垂直居中异常，统一用height控制，并设line-height: normal
Chrome/Firefox 下自定义箭头不居中
Bootstrap 4 的 .custom-select::after 用 top: 50% + transform: translateY(-50%) 垂直居中，但前提是元素有明确高度。如果父级 select 高度由 line-height 或 padding 推导而来，计算可能失准。
更稳的做法是改用 flex 布局模拟右侧容器：
.custom-select { position: relative; }
.custom-select::after {
content: "▼";
position: absolute;
right: 0.75rem;
top: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
color: #6c757d;
pointer-events: none;
}
这样不依赖 transform，兼容性更好，也避免 Safari 下偶尔的渲染抖动。
所有浏览器都显示原生箭头？那是 all: revert 搞的
如果你在项目里加了 all: revert 来恢复原生控件（比如日历图标、拖拽手柄），它会把 appearance、background、border 全部退回到 UA 样式表，结果就是 Bootstrap 的自定义箭头也被干掉了。
别全局写 input, select, textarea { all: revert; }，而是收窄范围：
- 只对需要原生行为的控件加，比如
input[type="date"]、textarea - 给自定义下拉框加专属 class：
<select class="custom-select-native"></select>，再单独重置它 - 确保这条规则在 Bootstrap CSS 之后加载，否则会被覆盖
真正难的不是让箭头消失或出现，而是在不同浏览器里保持高度一致、焦点可见、键盘导航正常——这些细节一旦忽略，后期修复成本远高于初始化时多写几行精准样式。
