Bootstrap 5 的 form-select 下拉箭头无法直接用 CSS 修改，因其由浏览器原生控件渲染，非 DOM 节点；需通过 background-image 替换并同步调整 padding-right、background-size 等以确保兼容与显示正确。
Bootstrap 5 的 form-select 为什么不能直接用 CSS 改下拉箭头？
因为原生 <select> 的下拉箭头是浏览器控件，不是 dom 节点，form-select 只是加了 padding、border、font 等基础样式，但没动 appearance —— 所以你改背景色、边框都生效，唯独箭头纹丝不动。
- Chrome / Edge 默认用
-webkit-appearance: menulist，Firefox 是-moz-appearance: menulist，两者都不支持子元素选择器操作箭头 - 强行用
background-image覆盖箭头时，必须同时设padding-right避免文字被遮挡 - 如果用了
form-select-lg或form-select-sm，记得同步调整padding和font-size，否则图标错位
想真正自定义箭头和菜单样式，得换方案
纯 CSS 搞不定箭头 + 下拉面板样式（比如圆角、阴影、悬停高亮），就得放弃原生 <select>，用「伪下拉」：一个只读 <input> + 一个动态显示/隐藏的 <ul> 列表。Bootstrap 官方 Dropdown 组件就是干这个的，但注意它默认绑定的是 <a> 或按钮，不是表单字段。
- 如果你在
bootstrap-table单元格里做下拉编辑，别用form-select，改用formatter返回带data-bs-toggle="dropdown"的按钮 +.dropdown-menu，再用 JS 同步 value 到隐藏<input> - 用
datlist不行——它只是输入建议，不阻止用户手输，也不支持多选、禁用项、分组标题等 - 第三方库如 Choices.js、Tom Select 可以无缝集成 Bootstrap 5 主题，且保留键盘导航（Tab/↑↓/Enter）支持，比自己手写更稳
用 form-select 时最容易忽略的兼容性细节
很多人以为加个 disabled 就完事，结果发现移动端点不动、iOS Safari 不触发 focus、屏幕阅读器读不出选项数量——这些都不是 bug，是规范行为。
-
disabled状态下，<select>完全失去焦点能力，tabindex失效；如需“视觉禁用但可聚焦”，该用aria-disabled="true"+ CSS 灰化 - 移动端 Safari 对
form-select的size属性（控制可见选项数）完全无视，只认原生弹出式选择器 - 如果下拉项超过 10 个，别依赖滚动条样式微调——iOS 和 Android 原生选择器根本不走 CSS 滚动，你写的
::-webkit-scrollbar白写
真要动手美化，从这三行 CSS 开始试
不推库、不换结构，只想让 form-select 看着顺眼点？先加这三行，再按需扩展：
select.form-select {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 0.75rem center;
}
- SVG 箭头路径已转义，直接贴进 CSS 就能用，颜色用
%23343a40（Bootstrap 的gray-800） -
background-position的0.75rem要和padding-right一致，否则 iOS 上文字会挤到箭头后面 - 别忘了加
background-size: 1rem控制图标大小，否则在高 DPI 屏幕上糊成一团
