应提高选择器权重并兼顾多端兼容：优先用.form-control.is-valid等高权重要素，同步修改border-color等关联样式，结合js动态控制状态，并为旧浏览器提供.is-valid类降级方案。
如何覆盖 Bootstrap 的 :valid 和 :invalid 伪类颜色
Bootstrap 默认用 :valid / :invalid 伪类 + .is-valid / .is-invalid 类控制表单反馈色，但直接写 :valid { color: red } 很可能不生效——因为 Bootstrap 的样式优先级更高，且它用的是属性选择器（如 [class*="is-valid"]）和更具体的组合（如 .form-control.is-valid）。
实操建议：
- 必须提高 CSS 选择器权重：用
.form-control:valid不够，改用.form-control.is-valid或更稳妥的.form-control:not(:placeholder-shown).is-valid（避免 placeholder 干扰） - 别只改文字颜色：Bootstrap 同时控制
border-color、background-image（检查图标）、padding-right（为图标留空间），漏掉任一都可能显示异常 - 如果用了
required但没输内容，浏览器原生会触发:invalid，此时.is-invalid类可能还没加——得靠 JS 主动 toggle，或改用:user-invalid（但兼容性差，Chrome 102+ 才稳定）
为什么 !important 不是好解法，以及替代方案
加 !important 能强行覆盖，但会让后续维护变脆弱：比如升级 Bootstrap 版本后，它的新规则可能带更多 !important，或者你写的 !important 意外影响了其他组件（如 .btn.is-valid）。
更可控的做法：
- 在自定义 CSS 文件中，把样式写在 Bootstrap 引入之后（顺序即权重）
- 复用 Bootstrap 的 Sass 变量：如果项目用 Sass，重定义
$form-valid-color、$form-invalid-color，再重新编译，一劳永逸 - 用内联 style 不行（伪类无法内联），但可以用
style属性配合 JS 动态设置borderColor，适合临时调试
表单控件类型不同，伪类行为差异大
input[type="email"] 和 textarea 对 :valid 的判定逻辑不同：前者输入任意非空字符串就判 valid（哪怕不是邮箱格式），后者只要非空就 valid；而 select 默认选项带 value="" 时，选中它会触发 :invalid（即使加了 required）。
关键点：
-
input[type="number"]空值时是:invalid，输入字母也是:invalid，但输入"1.5"是 valid —— 这和你期望的“必须整数”不符，得额外用step="1"或 JS 校验 -
checkbox和radio不响应:valid/:invalid，得靠.is-valid类手动控制 - 使用
setCustomValidity("")可以主动清空原生校验状态，否则某些情况下（如从 invalid 改成 valid）伪类不会自动更新
移动端 Safari 和旧版 Edge 的兼容陷阱
Safari 15.4 之前不支持 :user-invalid，且对 :valid 的触发时机更保守（比如 focus out 后才计算）；IE11 完全不支持这些伪类，所有反馈都得靠 JS + .is-valid 类驱动。
保底策略：
- 永远同时写两套规则：一套用伪类（现代浏览器），一套用
.is-valid（降级兜底） - 避免只依赖
:placeholder-shown判断是否为空——Safari 在 autofill 后可能不触发该伪类，导致反馈状态滞留 - 用
checkValidity()方法 +addEventListener("input", ...)主动同步状态，比纯 CSS 更可靠
真正麻烦的不是怎么改颜色，而是不同输入类型、不同浏览器、不同交互阶段下，valid/invalid 状态的边界非常模糊。动手前先用 DevTools 的 Elements 面板实时观察 class 和伪类变化，比硬猜快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
