bootstrap 5的form-select无法真正自定义下拉箭头和面板，因受浏览器原生控件限制；appearance: none是可控起点，但需同步处理焦点、键盘导航与可访问性。
Bootstrap 5 的 form-select 默认样式无法真正“自定义”下拉箭头和面板，这不是你 CSS 写得不对，而是浏览器原生控件限制导致的——appearance: none 是唯一可控起点，但必须配套处理焦点、键盘导航和可访问性。
为什么直接改 form-select 的 background-image 只能修修补补
你加了 background-image 替换箭头，却可能发现 iOS 上图标错位、Chrome 下点击区域偏移、或者 form-select-sm 里文字被遮住。这是因为：
-
background-position: right 0.75rem center中的0.75rem是基于默认尺寸写的，遇到form-select-sm或form-select-lg时 padding 和 font-size 都变了，但 background-position 没同步更新 - iOS Safari 根本不渲染自定义
background-image，它坚持用自己的箭头，且无视appearance: none - 你设了
padding-right: 2.5rem防遮挡，但若用户缩放页面或用了系统字体放大，这个值又不够了 -
select::-webkit-appearance在 Chrome 120+ 才开始有限支持，Firefox 和 Safari 完全不认，不能当方案用
用 visually-hidden + 自定义结构替代原生 select 的实操要点
真要完全控制样式（圆角、阴影、悬停高亮、自定义下拉面板），就得放弃纯 CSS 路线，把原生 select 当数据源隐藏，再用其他 DOM 模拟交互。关键不是“怎么画得好看”，而是“怎么不破坏功能”：
- 原生
select必须保留，加class="visually-hidden"（不是display: none），否则屏幕阅读器读不到选项，也触发不了change事件 - 自定义下拉列表（比如
<ul class="custom-select-menu"></ul>）需手动绑定ArrowDown/ArrowUp/Enter/Escape事件，否则键盘用户根本没法用 - 焦点管理必须显式控制：
tabindex="0"加在触发器上，focus()调用要精准落到当前高亮项，否则 Tab 键跳过整个组件 - 动态增删选项后，不能只操作 DOM，还得调用类似
refreshOptions()的方法（如果用 Choices.js/Tom Select）或自己同步select.options和 UI 列表
第三方库集成比手写更稳，但要注意 JS 逻辑迁移
选 Choices.js 或 Tom Select 不是为了图省事，而是它们已解决了一堆边界问题：iOS 滚动兼容、键盘焦点链、禁用项灰显、分组 <optgroup></optgroup> 渲染、多选标签布局。但引入后有硬性代价：
- 所有原来直接读写
mySelect.options、mySelect.selectedIndex的 JS 逻辑全部失效——必须切到库的 API，比如choices.getValue()、choices.setChoiceByValue("xxx") -
apalfrey/select2-bootstrap-5-theme看似无缝，但它只管样式；Select2 自身仍会注入大量内联 style 和 class，若页面已有全局.select2-dropdown覆盖规则，容易冲突 - Webpack/Vite 项目里，别用
import "select2"后再单独引 CSS，要用@import "~select2-bootstrap-5-theme/dist/select2-bootstrap-5-theme.css"确保变量继承正确
最易被忽略的点是：无论用哪种方案，只要脱离了原生 select 的渲染流，就等于主动放弃了浏览器对表单控件的原生语义保障。验证、自动填充、密码管理器识别、甚至部分无障碍工具链的支持，都会打折扣——这不是加个 aria- 属性就能补全的。
