form-select 的原生下拉箭头由浏览器渲染，不在 dom 中，无法用 css 伪元素或子选择器控制；唯一可行的 css 方案是 appearance: none + background-image 替换 svg 箭头，并同步处理 padding-right、background-position 和 background-repeat；但 ios safari 完全不支持该方案，需改用伪下拉（如 bootstrap dropdown 或 choices.js）。
form-select 的箭头不是 DOM 元素，无法用选择器直接选中
你写 .form-select::after 或 .form-select > svg 都不会生效——因为原生 <select></select> 的下拉箭头由浏览器控件渲染（Chrome 是 -webkit-appearance: menulist，Firefox 是 -moz-appearance: menulist），它压根不在 DOM 树里，CSS 拿不到、删不掉、也动不了。
这意味着所有“覆盖伪元素”“插入子节点”的思路，在 form-select 上天然失效。别浪费时间查 ::-webkit-scrollbar 或 ::marker，它们对 select 无效。
background-image 替换是唯一可行的 CSS 路径，但必须配准三处参数
真正能走通的方案只有：清空原生外观 + 用 background-image 叠加自定义 SVG 箭头。但只写一行 background-image: url("data:image/svg...") 必然出错，必须同步处理：
-
appearance: none必须显式声明，否则 Safari 和 Firefox 会无视后续样式 -
padding-right要留足空间（如1.75rem），否则文字被图标遮住；若用了form-select-sm，得改成1.5rem，form-select-lg则要2rem -
background-position必须写成right 0.75rem center，不能只写right center——0.75rem是垂直偏移量，不同尺寸下需同步调整 - 漏掉
background-repeat: no-repeat？图标会在右侧平铺成一排小箭头
示例：
.form-select {
appearance: none;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23212529' viewBox='0 0 16 16'%3e%3cpath d='M8 10.5a.5.5 0 0 1 .5.5v2.5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-2.5a.5.5 0 0 1 .5-.5z'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 0.75rem center;
padding-right: 1.75rem;
}
iOS Safari 完全不支持 background-image 替换，别白费功夫
哪怕你把 background-image 写得再精准，iOS Safari 仍会坚持渲染自己的灰色小三角，且无视 appearance: none。这不是 Bug，是 WebKit 的硬性限制。Chrome 120+ 开始有限支持 select::-webkit-appearance，但 Firefox 和旧版 Chrome 依然不认。
如果你的用户群包含大量 iOS 用户（尤其是企业内网或教育场景），这个方案就等于没做。此时该立刻转向「伪下拉」方案——用 .dropdown + .dropdown-menu 模拟，或集成 Choices.js 这类库，它们生成的是真实 DOM，可完全控制。
想彻底可控？放弃 form-select，用 dropdown-toggle + 自定义结构
当需求不只是换箭头，而是要圆角、阴影、悬停高亮、搜索过滤时，form-select 就是死胡同。正确做法是：
- 保留原生
<select class="visually-hidden"></select>（不能用display: none，否则屏幕阅读器读不到） - 用
<button class="btn dropdown-toggle"></button>做触发器，绑定data-bs-toggle="dropdown" - 用
<ul class="dropdown-menu"></ul>渲染选项列表，每个<li>对应一个<option></option> - 手动同步 value：点击
dropdown-item时，更新隐藏select的selectedIndex并触发change事件
这个路径绕开了浏览器限制，但代价是：你得自己处理键盘导航（ArrowDown/Enter）、焦点管理（tabindex、focus()）、无障碍属性（aria-expanded、aria-labelledby）。如果不想重复造轮子，Choices.js 的 useSelect 模式就是为这种场景设计的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
