直接改 .form-control.is-valid 的 border-color 不生效，是因为 bootstrap 5 默认通过 --bs-form-valid-border-color 变量控制颜色，且需同步覆盖 :focus 状态、反馈文字及 svg 图标填充色；推荐用 :root 变量全局覆盖或提高选择器权重加 !important。
直接改 .form-control.is-valid 的 border-color 不生效？
因为 Bootstrap 5 默认用 --bs-form-valid-border-color 变量控制该颜色，而 .is-valid 类本身只设了 border-color: var(--bs-form-valid-border-color)。如果你在 CSS 里只写 .form-control.is-valid { border-color: #28a745; }，大概率被后续加载的 Bootstrap 样式覆盖——尤其当它带 :focus 或 :hover 状态时，权重更高。
必须同时覆盖默认态、聚焦态和校验图标
验证成功状态不是单一样式，而是多个视觉层叠加：
-
.form-control.is-valid：基础边框色 -
.form-control.is-valid:focus：点击后边框+阴影需同步更新，否则一聚焦就变回原色 -
.form-control.is-valid ~ .valid-feedback：反馈文字颜色建议同步调整，保持语义一致 - 如果用了自定义校验图标（比如通过
background-image），SVG 中的 fill 颜色也得手动替换，否则仍是绿色
推荐最小可行代码（确保放在 Bootstrap CSS 之后）：
.form-control.is-valid {
border-color: #0066cc !important;
}
.form-control.is-valid:focus {
border-color: #004080 !important;
box-shadow: 0 0 0 0.25rem rgba(0, 102, 204, 0.25) !important;
}
.valid-feedback {
color: #0066cc;
}
用 CSS 变量全局统一更干净（Bootstrap 5.3+）
如果你项目中所有 .is-valid 都要换色，且用的是 Bootstrap 5.3 或更新版本，直接覆盖变量比写一堆 !important 更可靠：
:root {
--bs-form-valid-border-color: #0066cc;
--bs-form-valid-color: #0066cc;
}
注意两点：
- 这个变量只影响
.is-valid相关样式，不影响.is-invalid或普通边框，副作用小 - 深色模式下（
data-bs-theme="dark"）不会自动适配，如需支持，加一句：[data-bs-theme="dark"] { --bs-form-valid-border-color: #3a86ff; }
为什么 JS 动态添加 is-valid 后颜色还是不对？
常见原因是 DOM 更新后样式未重计算，或你写的 CSS 没命中实际结构：
- 检查元素是否真有
class="form-control is-valid"—— 有些框架（如 Vue 表单库）可能把is-valid加在父容器上，而非input自身 - 确认没漏掉
type或required属性：Bootstrap 的.is-valid是纯 class 控制，但若你混用原生:valid伪类，浏览器不触发校验则 class 无效 - 避免在
style=""里内联写border-color：它无法覆盖:focus，且和is-valid冲突
最稳的方式是放弃内联样式，用独立 class（如 my-valid-input）配合上述规则局部覆盖，不污染全局 .form-control。
