Bootstrap 5 的 form-select 箭头是浏览器原生渲染，无法用 CSS 直接修改；background-image 替换易错位或失效，需配准 padding-right、background-position 及 no-repeat；iOS Safari 完全不支持该方式；dropdown-toggle 可用伪元素+Font Awesome 或 inline SVG 安全替换；若需深度定制下拉面板，应选 Choices.js 等库或手写伪下拉，但须处理无障碍与交互逻辑。
Bootstrap 5 的 form-select 下拉箭头不能靠改 class 或简单 CSS 覆盖——它压根不是 DOM 元素，而是浏览器原生控件渲染的图形，CSS 拿不到、删不掉、也动不了。
为什么 background-image 替换箭头经常错位或失效
很多人复制一段 background-image: url("data:image/svg...") 就以为完事，结果图标被裁、文字重叠、在 iOS 上消失。问题不在 SVG 写得对不对，而在上下文没对齐：
-
padding-right必须显式设够（比如1.75rem），否则自定义图标会压住选项文字 -
background-position要写成right 0.75rem center，不能只写right center——不同尺寸（form-select-sm/form-select-lg）需要不同偏移值 - iOS Safari 完全忽略
background-image对select的设置，哪怕你用 data URI 也没用；Chrome 120+ 虽支持select::-webkit-appearance，但 Firefox/Edge 不认，别当真 - 没加
background-repeat: no-repeat？图标会横向平铺成一排小箭头
用 font-awesome 或 inline SVG 替换 dropdown-toggle 箭头更稳
这个适用于 Bootstrap 的下拉菜单（.dropdown-toggle），和表单 select 是两回事。这里能真正替换，因为它是纯 CSS 伪元素：
- 先清空原生三角：
.dropdown-toggle::after { display: none; } - 再用字体图标插入：
.dropdown-toggle::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-left: 0.25rem; } - 或者用内联 SVG：
background-image: url("data:image/svg+xml,%3csvg...");，但必须同步设background-size: 1rem和padding-right: 2rem - 关键：保留
aria-expanded属性，别手动删或覆盖——Bootstrap JS 靠它控制展开状态，图标只是视觉反馈
选第三方库还是手写“伪下拉”？看这三点
如果你要改的不只是箭头，而是整个面板样式（圆角、阴影、搜索、分组高亮），原生 select 就是死胡同。这时只有两个选择：
-
用 Choices.js / Tom Select：它们把
select当数据源，生成完整 DOM 结构（div+input+ul），键盘导航（↑↓EnterTab）开箱即用，无障碍支持比手写强得多；但要注意——所有原来直接操作select.options或select.value的 JS 逻辑都会失效，得换成库的setValue()、setChoices()等 API -
自己手写伪下拉：适合极简场景（比如就换图标+固定几项）。必须手动处理
ArrowDown/Escape键、焦点进出、屏幕阅读器的role="listbox"和aria-activedescendant，漏一条就 WCAG 不达标 -
千万别用
datalist冒充下拉框——它不阻止手输、不支持禁用项、没分组、没多选，连基础语义都不满足
最常被忽略的一点：所有“美化 select”的方案，本质都是绕过原生控件。这意味着你放弃的不只是箭头，还有浏览器自带的滚动行为、触摸反馈、深色模式适配、以及移动端原生选择器的性能优化。换图标容易，换体验难——别只盯着 CSS 变量或 SVG 路径，先想清楚你要的是“看起来像”，还是“用起来真好”。
