应使用高特异性选择器（如.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这种硬编码值不会变，仍需单独覆盖
.is-invalid）这三者，漏掉一个，上线后就容易被用户点出来。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
