.invalid-feedback 样式不生效的根本原因是验证状态未激活或 DOM 结构不满足 Bootstrap 选择器条件，需同时设置 .form-control.is-invalid 和其兄弟选择器样式，并确保 novalidate 属性与 JS 显式添加类名。
直接改 .invalid-feedback 的颜色或字体，90% 情况下不会生效——不是 CSS 写错了，而是验证状态根本没被激活，或者 DOM 结构不满足 Bootstrap 的选择器匹配条件。
为什么 .invalid-feedback { color: red } 不起作用
常见现象是文字还是灰色、半透明、甚至完全不显示。根本原因有三个：
-
.invalid-feedback默认display: none，只在紧邻的前一个兄弟元素带.form-control.is-invalid类时，才通过.form-control.is-invalid ~ .invalid-feedback规则显示 - 它自带
opacity: 0.6，单纯改color会被透明度压制，显得发灰 - Bootstrap 原生规则权重极高（比如
[class*="is-invalid"]），单用.invalid-feedback选择器压不住
必须同步覆盖的两个 CSS 选择器
只改一个等于白改。你要同时写：
.form-control.is-invalid {
border-color: #d32f2f;
}
.form-control.is-invalid ~ .invalid-feedback {
color: #d32f2f;
opacity: 1;
font-weight: 500;
}
注意：~ 是通用兄弟选择器，要求 <input class="form-control is-invalid"> 和 <div class="invalid-feedback"> 在 DOM 中**紧挨着**，中间不能插空格、注释或其它标签。如果用了 form-floating，结构也得保持这种紧邻关系：输入框 → 标签 → .invalid-feedback。
立即学习“前端免费学习笔记（深入）”；
表单和 JS 必须配齐，否则 CSS 是摆设
CSS 再对，.is-invalid 类不出现，样式就永远不触发。关键动作有：
-
<form>标签必须带novalidate属性，否则浏览器原生弹窗抢走焦点，.invalid-feedback根本没机会显示 - 校验失败后，要显式调
input.classList.add('is-invalid')，不能只靠input.setCustomValidity('msg')—— 后者只影响checkValidity()返回值，不改 DOM 类 - 每次成功校验后，记得
input.classList.remove('is-invalid', 'is-valid')，避免残留类导致样式错乱 -
.is-invalid必须加在<input>、<select>或<textarea>上，加在外层<div>里无效
iOS Safari 下伪类不可靠，别依赖 :invalid
在 iOS Safari 里，.form-control:invalid 常延迟触发甚至不触发——这不是 Bug，是 Safari 对表单状态更新更保守。它要等用户真正离开焦点才重新计算，导致实时反馈断层。
解决方案只有一个：放弃依赖伪类，用 JS 主动操作类名。例如监听 blur 或 input 事件，手动判断并切换 .is-invalid。
真正卡住人的从来不是怎么写 CSS，而是忘记 novalidate 是开关，以及 .is-invalid 必须由 JS 显式添加——这两个点漏掉任何一个，整个自定义样式链就断了。
