Bootstrap原生select无法直接美化，因浏览器强控渲染，箭头、边框、聚焦态等无法用CSS覆盖；推荐用bootstrap-select库或appearance:none+自定义箭头方案，但需注意iOS兼容性及键盘导航、无障碍支持。
Bootstrap 原生 <select></select> 为什么不能直接美化
因为浏览器对 <select></select> 的渲染控制极强，原生控件的边框、下拉箭头、聚焦样式基本无法用纯 CSS 覆盖（尤其是 Chrome 和 Safari）。Bootstrap 5 默认只是重置了部分 margin/padding 和 font，没封装美化版 select 组件——它把这事交给了开发者或第三方库。
所以别在 form-select 类上死磕伪元素或 appearance: none：部分生效、iOS 不响应、键盘导航断裂是常态。
推荐方案：用 bootstrap-select（最稳）
这是社区维护最久、兼容性最好的 Bootstrap 扩展库，基于原生 <select></select>，通过 JS 动态生成 DOM 替换视觉层，保留语义和表单提交能力。
- 必须引入 CSS + JS：
bootstrap-select.min.css和bootstrap-select.min.js（注意顺序：jQuery → Bootstrap JS → 这个 JS） - HTML 只需加
class="selectpicker"：<select class="selectpicker"> <option>选项一</option> <option>选项二</option> </select>
- 初始化不是必须的，但建议显式调用：
$('.selectpicker').selectpicker();，否则动态插入的 select 不会生效 - 支持搜索、多选、分组、图标、自定义模板——但开启搜索后，
data-live-search="true"必须写在<select></select>标签里，JS 初始化时传参无效
轻量替代：CSS + appearance: none + 自定义箭头（仅限现代浏览器）
如果项目不需 IE/旧安卓、且只做基础美化（圆角、配色、统一高度），可以绕过 JS 库：
- 关键三步：
appearance: none去默认样式 +background-image画下拉箭头 +padding-right留出箭头空间 - 箭头必须用 base64 或 SVG，避免额外请求：
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%236c757d' d='M8 11l-4-4h8z'/%3E%3C/svg%3E"); - Chrome 下焦点边框仍会穿透，得加：
outline: none; box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);模拟 Bootstrap 的 focus-ring - 致命限制：iOS Safari 完全忽略
appearance: none，箭头和圆角全失效，只能 fallback 到原生样式
避坑重点：表单验证和键盘操作别断掉
无论用哪种方案，<select></select> 的 required、aria-invalid、aria-describedby 等属性必须保留在原始标签上——第三方库（如 bootstrap-select）会读取它们并同步到新 DOM；手写 CSS 方案则完全依赖原生标签，不用动。
容易被忽略的是键盘交互：Tab 进入、↑↓ 切换选项、Enter 确认，这些在 JS 替换方案中默认支持，但自定义箭头方案里，只要没破坏原生 <select></select> 结构，就天然可用。真正要测的是移动端点击区域是否够大（至少 44×44px），以及屏幕阅读器能否正确播报选项文本。
