Bootstrap 5 默认 select 样式改不动，因其仅用 form-select 类设置基础排版，未覆盖原生下拉箭头、边框圆角及聚焦态，浏览器强制渲染原生控件；appearance: none + 自定义结构是可控方案，需保留原生 select 作数据源和无障碍基础，并手动处理键盘导航与焦点管理。
Bootstrap 5 默认 select 样式为什么改不动？
因为 bootstrap 5 对 <select> 元素只加了基础排版（如 form-select 类），但没覆盖原生下拉箭头、边框圆角或聚焦态——浏览器会坚持渲染自己的控件，css 无法直接修改箭头或下拉面板。你写的 border-radius 或 background 看似生效，其实只是作用在「外层容器」上，点开后还是原生弹窗。
用 appearance: none + 自定义结构替换原生 select
这是最可控的方式：隐藏原生控件，用 <div> + <button> + <ul> 模拟行为。适合需要深度定制（比如图标、分组高亮、搜索）的场景。
实操建议：
- 保留原生
<select>作为数据源和无障碍基础，用visually-hidden隐藏它（别用display: none，否则屏幕阅读器读不到） - 用 JavaScript 监听原生
change事件，同步更新自定义按钮的文本 - 给自定义下拉菜单加
position: absolute和z-index，避免被其他组件遮挡 - 必须手动处理键盘导航（
ArrowDown/Enter）和焦点管理，否则不符合 WCAG
form-select 类能调哪些样式？
这个类只设置了 display: block、width: 100%、基础边框和内边距。你可以安全覆盖的有：
-
border/border-color：改边框颜色粗细没问题 -
padding：影响内部文字间距，但别设成0，否则 iOS Safari 会显示异常 -
font-size/line-height：可调，但需同步调整height防止文字截断 -
color：控制选项文字颜色，但下拉面板里的文字仍由浏览器决定，无法统一
注意：background-image 覆盖默认箭头时，不同浏览器路径长度不一致，iOS 上可能失效；Chrome 120+ 开始支持 select::-webkit-appearance，但兼容性差，不建议依赖。
第三方库选 choices.js 还是 tom-select？
如果项目已用 Bootstrap，优先选 tom-select：它原生支持 Bootstrap 5 的 CSS 变量（比如自动读取 --bs-primary 作高亮色），且体积比 choices.js 小 40%。
容易踩的坑：
- 初始化前确保 DOM 已就绪，否则
tomSelect()找不到元素 - 如果原
<select>有required属性，tom-select不会自动继承校验逻辑，得手动绑定form.checkValidity() - 动态增删选项后，必须调用
refreshOptions()，否则 UI 不更新
复杂点在于：所有这类库都会把原生 select 转成多个 DOM 节点，如果页面有 JS 直接操作 select.options，那些逻辑会突然失效——得全部切到库提供的 API 上。
