怎么修复Bootstrap 4表单选择框Select的CSS箭头样式异常？-css教程-PHP中文网

IE 11 中残留箭头源于 ::-ms-expand 伪元素，需单独设置 select::-ms-expand { display: none; } 并重置 padding-right 和 background-position；Chrome/Firefox 下建议用 flex 替代 transform 实现箭头居中；all: revert 会覆盖自定义样式，应限制作用范围。

怎么修复bootstrap 4表单选择框select的css箭头样式异常？

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 布局模拟右侧容器：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

.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 下偶尔的渲染抖动。