input:valid 和 input:invalid 伪类不生效是因为缺少 required 属性或 type 语义化类型（如 email、url），导致浏览器未触发原生校验；bootstrap 的 is-valid/is-invalid 依赖 js 而非伪类，需确保 html 约束存在且 css 权重足够。
input:valid 和 input:invalid 伪类不生效？检查表单控件是否带 required 或 type 约束
Bootstrap 的表单校验颜色（比如 is-valid / is-invalid）默认依赖 JS 触发的 class，而不是原生 :valid / :invalid。如果你直接写 input:valid { color: green; } 却没反应，大概率是因为浏览器没触发原生校验状态——required 属性没加，或者 type="email" 这类语义类型缺失，导致表单控件压根不会进入 :valid 状态。
实操建议：
- 确保
<input>带required，或type="email"/type="url"/type="number"等可触发校验的类型 - 避免只靠 Bootstrap 的
is-validclass 来驱动样式，想用伪类就得走原生校验路径 - 注意：Chrome/Firefox 对空值 +
required的:invalid触发很及时；但 Safari 有时要失焦才更新，别拿它当唯一测试环境
覆盖 Bootstrap 的 .form-control.is-valid 边框色，优先级不够怎么办？
Bootstrap 4+ 的 .form-control.is-valid 默认用 border-color: #28a745，但你写的 CSS 没生效，八成是选择器权重不够，或者被后面加载的 CSS 覆盖了。
实操建议：
- 用更具体的选择器，比如
.form-control.is-valid:focus或input.form-control.is-valid，比单纯.is-valid权重高 - 避免用
!important，改用:root变量覆盖（Bootstrap 5 支持）：:root { --bs-form-valid-border-color: #0066cc; } - 确认你的 CSS 在 Bootstrap 之后加载；如果用构建工具，检查
@import顺序或link标签位置
自定义校验图标颜色时，background-image 的 url() 路径出错
Bootstrap 默认用 SVG data URL 渲染校验图标（如 background-image: url("data:image/svg+xml,%3csvg...")），你一换颜色就图标消失，往往是复制粘贴时漏了 URL 编码字符，或手动改了 base64/data URL 但没重新编码。
实操建议：
- 别手改 data URL，用在线工具（如 svgomg.net）导出新 SVG，再转成 data URL
- 更稳妥的方式是禁用图标，改用
::after伪元素 + Unicode 字符：.form-control.is-valid { background-image: none; }<br>.form-control.is-valid:focus { background-image: none; }<br>.form-control.is-valid ~ .valid-feedback::before { content: "✓"; color: #0066cc; } - 如果必须保留图标，优先覆盖
background-position和color（部分版本支持用filter: hue-rotate()微调）
移动端输入法弹出后，.is-invalid 样式闪退？focus 状态丢失问题
在 iOS Safari 或某些 Android 浏览器中，软键盘弹起会导致 input 失去 focus，从而让 .is-invalid 的 :focus 样式瞬间回退，看起来像“闪一下就没了”。
实操建议：
- 不要只依赖
.form-control.is-invalid:focus，把关键样式（如边框色、阴影）也写给非 focus 状态：.form-control.is-invalid,<br>.form-control.is-invalid:focus { border-color: #dc3545; } - JS 层面可监听
input事件 +setCustomValidity主动维持状态，避免仅靠 blur/focus 切换 class - 真机测试时关掉「自动填充」和「密码管理器」，它们会干扰原生校验状态流
真正麻烦的是那些没显式声明 required 却又靠 JS 手动加 is-invalid 的场景——此时伪类完全不参与，所有样式都得靠 class 控制，别指望 :invalid 自动帮你兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
