直接修改 .form-control.is-valid 边框色无效，因 Bootstrap 5 依赖 CSS 变量 --bs-form-valid-border-color，且需同步覆盖默认态、聚焦态及反馈元素样式，并确保 SVG 图标 fill 值更新；.invalid-feedback 不显示或颜色异常则因缺少 novalidate 属性或 was-validated 类，且必须紧邻输入框、正确设置 opacity 与 color。
直接改 .form-control.is-valid 边框色为什么无效
因为 Bootstrap 5 默认用 CSS 变量 --bs-form-valid-border-color 控制颜色，.form-control.is-valid 本身只是引用该变量：border-color: var(--bs-form-valid-border-color)。你写 .form-control.is-valid { border-color: #0066cc; } 很可能被后续加载的 Bootstrap 样式覆盖——尤其当它带 :focus 状态时，选择器权重更高。
必须同步覆盖以下三处，否则会出现“失焦时变绿、一点击又回默认色”的割裂感：
-
.form-control.is-valid（默认态） -
.form-control.is-valid:focus（聚焦态，含box-shadow和outline） -
.form-control.is-valid ~ .valid-feedback（反馈文字颜色与透明度）
如果用了 SVG 校验图标（如 background-image: url("data:image/svg+xml,...")），还得手动替换其中的 fill 值，否则图标仍是默认绿色。
.invalid-feedback 不显示或颜色不对的真正原因
不是 CSS 写错了，而是漏掉了两个硬性前提：
立即学习“前端免费学习笔记（深入）”；
- 父级
<form>必须有novalidate属性，或已添加was-validated类；否则浏览器原生验证会拦截，Bootstrap 的反馈不触发 -
<div class="invalid-feedback">必须是<input class="form-control is-invalid">的**紧邻下一个兄弟元素**，中间不能插空格、注释或其它标签
即使结构正确，.invalid-feedback 默认带 opacity: 0.6，单纯改 color 会被压暗。必须同时写：
.form-control.is-invalid ~ .invalid-feedback {
color: #d32f2f;
opacity: 1;
}
注意：Bootstrap 的原始规则 specificity 很高（比如 [class*="is-invalid"]），单用 .invalid-feedback 选中器基本压不住。
绕过 !important 的三种可靠方式
Bootstrap 5.3+ 在 :focus-visible、.btn:disabled 等关键状态大量使用 !important，硬加 !important 容易失效或引发维护混乱。
-
用更高特异性选择器：比如
form .form-control.is-valid或.my-form .form-control.is-valid:focus，权重天然高于 Bootstrap 的.form-control.is-valid -
用 CSS 变量覆盖：在 Bootstrap 样式之后注入
:root变量，如:root { --bs-form-valid-border-color: #0066cc; }—— 这是最干净的方式，但要确认变量名准确（Bootstrap 5.3+ 已全面支持） -
避免单独改属性：改边框色时，必须连同
box-shadow、outline、border-radius一起重写，否则聚焦/禁用态会不一致
自定义校验图标和反馈文案的联动要点
Bootstrap 的 .valid-feedback / .invalid-feedback 是纯展示层，不感知 JS 校验逻辑。如果你用 setCustomValidity() 实现密码强度等业务规则，必须手动同步：
- 调用
input.setCustomValidity("密码至少8位")后，input.checkValidity()返回false，但is-invalid类不会自动加 —— 你要自己el.classList.add("is-invalid") - 同时更新
.invalid-feedback的textContent，不能只靠 HTML 静态内容 - 用户修改后，必须调用
input.setCustomValidity("")清空原生校验状态，否则字段永久 invalid
最容易被忽略的是：iOS Safari 对 :invalid 伪类响应滞后，依赖原生伪类的样式在移动端大概率不及时，必须靠 JS 主动控制 class 切换。
