bootstrap 5 默认不覆盖原生 样式，需手动添加 appearance: none 并用伪元素重绘箭头，否则圆角、背景、聚焦态等无法生效；推荐方案是 .custom-select 配合 ::after，兼顾兼容性与可访问性。
bootstrap 5 默认的 <select></select> 样式为什么改不动？
因为 bootstrap 5 彻底移除了对原生 <select></select> 的 css 样式覆盖（比如 appearance: none、边框重置等），只保留了基础字体和尺寸继承。你直接加 class="form-select"，它只是设置了 height、padding 和 font-size，但下拉箭头、边框圆角、聚焦态等仍由浏览器原生控制 —— 这就是你“改不动”的根本原因。
常见错误现象：
• 给 <select></select> 加 border-radius 没反应（Chrome/Firefox 下箭头区域不随圆角裁剪）
• 自定义背景色后，Windows 上箭头变模糊或错位
• 用 background-image 覆盖箭头，在 Safari 下失效
- 真正生效的样式必须作用于
<select></select>元素本身，且需配合appearance: none手动清除原生控件 - 必须手动补全箭头图标（用伪元素或额外标签），否则 Safari/旧 Edge 会显示空白或双箭头
- 聚焦状态（
:focus）需显式定义outline或box-shadow，否则可访问性受损
用 appearance: none + 伪元素重绘箭头（推荐方案）
这是兼容性较好、不依赖 JS 的纯 CSS 方案，适用于 Bootstrap 5.3+ 项目。核心是把原生下拉控件“隐藏”，再用 ::after 画一个可控的箭头。
.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;
}
<p>.custom-select:focus {
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
border-color: #86b7fe;
}</p><p>.custom-select::after {
content: "▼";
position: absolute;
right: 0.75rem;
top: 50%;
transform: translateY(-50%);
color: #6c757d;
pointer-events: none;
font-size: 0.75em;
}
</p>
- 务必保留
appearance: none，否则 Chrome/Firefox 仍渲染原生箭头 -
::after的pointer-events: none是关键，否则会拦截鼠标点击导致无法展开 - 若需 SVG 箭头（更清晰），建议用
background-image: url("data:image/svg+xml,...")替代文字内容 - 在 IE11 中
appearance不支持，需降级回原生样式（可加@supports not (appearance: none)条件）
用 Bootstrap 的 form-select-sm / form-select-lg 控制尺寸但不改外观
如果你只需要调整高度、字体大小，而非彻底重绘，直接复用 Bootstrap 内置类最安全：
<select class="form-select form-select-sm">...</select><select class="form-select form-select-lg">...</select>
这些类只修改 padding、font-size 和 height，不碰 appearance 或箭头，所以兼容性无风险。但注意：
• form-select-sm 的 height 是 calc(1.5em + 0.5rem + 2px)，其中 2px 是边框宽度，实际高度受 line-height 影响
• 在移动端，过小的 form-select-sm 可能导致触控困难，建议最小高度不低于 40px
第三方库如 Choices.js 或 Tom Select 的取舍
当需要搜索、多选、异步加载、分组等高级功能时，硬改原生 <select></select> 成本远高于引入轻量 JS 库。
-
Choices.js（v10+）默认不破坏语义，仍保留原<select></select>结构，仅添加 wrapper 和列表 DOM，CSS 定制自由度高 -
Tom Select更轻（~12KB gzip），API 更现代，但需手动初始化：new TomSelect("#my-select", { ... }) - ⚠️ 风险点：所有这类库都会移除原生
<select></select>的required校验行为，必须用 JS 手动触发checkValidity()并处理setCustomValidity() - 无障碍方面，部分库的 ARIA 属性更新有延迟，测试时务必用屏幕阅读器验证展开/收起状态播报
真正麻烦的不是怎么改样式，而是改完之后是否还能被键盘操作（Tab/Enter/Arrow）、是否在暗色模式下可读、是否在缩放 200% 时保持可用 —— 这些比箭头位置难调得多。
