应使用高特异性选择器（如。my-form .form-control）覆盖 Bootstrap 样式，同步修改 border、border-radius、:focus 的 outline 和 box-shadow、:disabled 状态，并优先用 CSS 变量而非！important。
怎么精准选中 Bootstrap 的 input 表单元素
Bootstrap 默认用 .form-control 类控制输入框样式，但直接写 .form-control {border: 2px solid red;} 往往无效——因为 Bootstrap 的 CSS 优先级高，且部分样式带!important。必须提高选择器权重或利用更具体的上下文。
- 推荐用组合选择器，比如
form .form-control或.my-form .form-control（给父容器加自定义 class） - 避免用
input.form-control这种写法：Bootstrap 5+ 已把.form-control同时作用于input、select、textarea，强行限定标签名反而漏掉其他类型 - 如果要单独改某类输入框（如只改密码框），用属性选择器：
input[type="password"].form-control
覆盖 Bootstrap 边框 / 圆角 / 聚焦态的关键 CSS 属性
Bootstrap 5 的 .form-control 默认有 border-radius: 0.375rem、border: 1px solid #ced4da、以及:focus 时的box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25)。想改这些，得一并重写，否则会出现“边框变了但圆角没变”或“聚焦时阴影和边框不匹配”的割裂感。
- 圆角必须显式覆盖：
border-radius: 4px;（不能只靠border-top-left-radius） - 聚焦态要同时处理
outline和box-shadow，否则键盘导航时可能看不见焦点：.form-control:focus {outline: none; box-shadow: 0 0 0 3px rgba(52, 144, 220, 0.3); } - 禁用状态（
:disabled）容易被忽略：Bootstrap 会降低透明度，若只改正常态，禁用后颜色可能突兀，建议连带写.form-control:disabled {background-color: #f8f9fa;}
为什么加 !important 不是好办法
加 !important 确实能强制覆盖，但会导致后续维护困难：一旦 Bootstrap 升级，新版本可能引入更多 !important 规则，你的样式反而失效；或者团队协作时别人不敢轻易删你的!important，最后堆出“重要风暴”。
- 真正可靠的方案是提升选择器特异性：比如用
.my-app .form-control比单纯.form-control权重高 - 把自定义 CSS 放在 Bootstrap CSS 之后加载（检查
<link>顺序），这是前提 - 对极个别无法绕过的属性（如某些版本 Bootstrap 对
height加了!important），才考虑局部用!important，且务必加注释说明原因
用 CSS 变量（Custom Properties）动态控制主题色
Bootstrap 5 支持 CSS 变量，比如--bs-primary、--bs-border-color。如果你只是想换主题色而非彻底重写，直接覆盖变量更轻量、更可维护。
立即学习 “ 前端免费学习笔记（深入）”；
- 在
:root或父容器里重设：:root {--bs-primary: #2563eb; --bs-border-color: #e2e8f0;} - 这样
.form-control:focus的阴影、.form-check-input:checked的背景色都会自动响应 - 注意：变量只影响 Bootstrap 内部使用该变量的地方，像
border这种硬编码值不会变，仍需单独覆盖
改表单样式最麻烦的从来不是写几行 CSS，而是搞清哪一层规则在起作用、哪几个状态要同步处理。特别是聚焦态、禁用态、验证态（.is-invalid）这三者，漏掉一个，上线后就容易被用户点出来。
