要修改 form-control 的边框颜色，需同时覆盖 border-color、.form-control:focus、.is-invalid/.is-valid 等状态类，并建议用自定义类（如 .my-border-blue）配合 !important 局部覆盖。
修改 form-control 的边框颜色要改哪几个 CSS 属性
bootstrap 表单输入框（input、textarea、select）默认使用 .form-control 类，它的边框由 border 控制，但实际生效还受 :focus 状态、:disabled、.is-invalid/.is-valid 等修饰类影响。只改 border-color 不够，必须同步处理聚焦态和状态类，否则点击后又变回蓝色或红色。
实操建议：
- 优先用
border-color覆盖默认值，但必须加!important（Bootstrap 4/5 的原生规则权重高） - 务必单独写
.form-control:focus，否则聚焦时仍会显示默认box-shadow和边框色 - 如果用了
.is-invalid，它自带的border-color: #dc3545会覆盖你的设置，得一并重写 - 避免直接改 Bootstrap 源码或全局
input标签样式，容易污染其他组件
用 CSS 类局部覆盖比全局修改更安全
直接在 HTML 里给输入框加自定义类（比如 my-border-blue），再用 CSS 针对性覆盖，比改 .form-control 原生样式靠谱得多。这样不影响其他表单，也方便复用和维护。
实操建议：
- HTML 中写：
<input type="text" class="form-control my-border-blue"> - CSS 中写：
.my-border-blue { border-color: #007bff !important; } .my-border-blue:focus { border-color: #0056b3 !important; box-shadow: 0 0 0 0.2rem rgba(0, 123, 191, 0.25) !important; } - 如果项目用了 Sass，推荐在自定义变量后通过
$input-border-color重新编译，但仅适用于全站统一换色场景 - 别用
style=""写内联样式——无法覆盖:focus，且难维护
Bootstrap 5 和 4 的关键差异点
Bootstrap 5 移除了 jQuery 依赖，但对表单边框的影响主要在 CSS 变量和默认阴影上。5.x 默认聚焦时用 box-shadow 强调，4.x 则是纯边框加粗+色值变化；另外 5.x 的 .form-control 默认 border-radius 是 0.375rem，4.x 是 0.25rem，改边框色时若顺手调圆角，要注意这个差值。
实操建议：
- 查清你用的是哪个版本：看
bootstrap.min.css文件头注释，或运行console.log(bootstrap.Version)（需引入 JS） - Bootstrap 5 推荐用 CSS 变量控制，比如
--bs-primary，但.form-control并不直接响应它，仍需手动覆盖 - 如果用了
data-bs-theme="dark"，默认边框是浅灰，此时改色要兼顾暗色模式下的可读性
为什么加了样式还是没变？常见失效原因
最常遇到的是样式被更高优先级规则压住，或者状态没覆盖全。不是代码写错了，而是没打中真正起效的那个选择器。
常见错误现象和排查点：
- 边框颜色只在未聚焦时生效，一点就变蓝 → 忘了写
.form-control:focus规则 - 用了
.is-invalid后颜色又被顶掉 → 必须显式写.form-control.is-invalid或.my-border-blue.is-invalid - 在 Chrome 开发者工具里看到样式被划掉，但找不到源头 → 很可能是 Bootstrap 的
prefers-reduced-motion媒体查询或@layer（Bootstrap 5.3+）干扰，试试加!important或提升选择器权重（如加body .my-border-blue） - Vue/React 组件里样式不生效 → 检查是否启用了 CSS Modules 或 Scoped Style，需用
:deep(.form-control)（Vue）或css-in-js方式注入
边框颜色看着简单，但涉及状态、优先级、框架版本、构建工具多个层面。改之前先打开 DevTools，盯着 computed styles 看哪条规则真正生效，比猜快得多。
