直接加 border-radius 或 background-color 无效，因 Bootstrap 5 的 .form-select 未覆盖原生 select 的 appearance 和渲染逻辑，下拉面板与箭头仍由浏览器控制；需用 appearance: none + ::after 重绘箭头并确保可访问性、键盘导航及深色模式适配。
为什么直接加 border-radius 或 background-color 没反应
因为 Bootstrap 5 的 .form-select 类只设置了 height、padding 和 font-size，没动 appearance、border-radius 渲染逻辑，更没覆盖原生下拉箭头。Chrome/Firefox/Safari 各自渲染自己的控件外壳，你写的圆角只是“框住它”，点开还是直角弹窗，箭头也照常遮挡背景色。
-
border-radius看似生效，实则只作用于外层容器；下拉面板和箭头区域不受影响 -
background-image替换箭头在 iOS Safari 完全失效，Chrome 下点击热区偏移 - 直接改
select::after不起作用——原生select不支持该伪元素
用 appearance: none + ::after 重绘箭头（推荐纯 CSS 方案）
这是兼容性最好、不依赖 JS 的起点。核心是清除原生控件，再用伪元素画一个可控的箭头，同时保留原生 select 的语义和可访问性。
- 必须加
appearance: none，否则 Chrome/Firefox 仍渲染原生箭头（2026 年仍有效） -
padding-right要留足（如2.25rem），给伪元素腾出空间，不然文字被遮或错位 -
::after必须设position: absolute+right/top+transform: translateY(-50%)居中 - 聚焦态必须显式写
.form-select:focus，不能只靠:focus-visible—— 否则鼠标点击无反馈
.custom-select {
appearance: none;
background-color: #fff;
border: 1px solid #ced4da;
border-radius: 0.375rem;
padding: 0.375rem 2.25rem 0.375rem 0.75rem;
position: relative;
}
.custom-select:focus {
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
border-color: #86b7fe;
}
.custom-select::after {
content: "▼";
position: absolute;
right: 0.75rem;
top: 50%;
transform: translateY(-50%);
color: #6c757d;
pointer-events: none;
font-size: 0.75em;
}
想彻底控制下拉面板？得放弃原生 select 结构
只要还用原生 select，下拉面板就永远由浏览器控制：无法加阴影、无法悬停高亮、无法搜索、无法自定义分组样式。真要深度定制，就得用 visually-hidden 隐藏原生控件，再用 <div>+<ul> 模拟交互。
- 原生
select必须保留并加class="visually-hidden"（不是display: none），否则屏幕阅读器读不到选项，change事件也不触发 - 自定义菜单需手动绑定
ArrowDown/Enter/Escape，否则键盘用户完全没法操作 - 动态增删选项后，不能只改 DOM，还得同步更新原生
select.options，否则表单提交时数据丢失 - 第三方库如
tom-select已解决这些边界问题，但会把原生select拆成多个节点，所有直接读写mySelect.selectedIndex的 JS 逻辑都会失效
别忽略 :focus-visible 和深色模式适配
Bootstrap 5.3+ 默认用 :focus-visible 控制键盘聚焦样式，只写 :focus 在 Tab 导航时根本没反应。而且深色模式下，--bs-border-color 和 --bs-form-control-focus-box-shadow 会自动切换，不单独处理就会出现浅灰边框糊在暗背景上。
立即学习“前端免费学习笔记（深入）”；
- 聚焦边框颜色改不动？大概率是漏了
:focus-visible，且没加!important（Bootstrap 原生规则带!important） - 想一揽子改所有表单控件的聚焦阴影，直接覆盖 CSS 变量：
:root { --bs-form-control-focus-box-shadow: 0 0 0 0.25rem rgba(79, 70, 229, 0.25); } - 深色模式下必须额外声明：
[data-bs-theme="dark"] { --bs-border-color: #343a40; }，否则边框在暗色背景下不可见 - 圆角值别硬写死，优先用
border-radius: var(--bs-border-radius)，方便后续主题切换
