要让 :invalid 真正生效并标红，必须为表单控件添加 required、type="email"、pattern 等校验属性；否则仅写 input:invalid { color: red; } 无效。
怎么让 :invalid 真正生效并标红？
浏览器只对「有校验规则且验证失败」的表单控件触发 :invalid，不是所有输入框默认都受控。常见误区是写了 input:invalid { color: red; } 却没反应——因为没加 required、type="email" 这类触发校验的属性。
- 必须显式添加校验约束：比如
required、minlength="6"、type="email"、pattern="[0-9]{3}" -
:invalid在用户未交互时也可能触发（如页面加载后空的required输入框），可用:user-invalid（Chrome 107+ / Safari 16.4+）延迟到失焦或提交后才生效 - 注意
textarea和select同样支持:invalid，但需配合required或multiple等条件
:invalid 和 JavaScript 校验冲突吗？
会。原生 :invalid 只响应 HTML5 内置校验逻辑；如果用 setCustomValidity("xxx") 手动设错，:invalid 仍会匹配（因为元素 validity.valid === false），但若调用 setCustomValidity("") 清除错误，样式会立刻消失——这点和 JS 的 classList.toggle("error", isValid) 行为不一致，容易造成视觉与状态不同步。
- 推荐统一用 JS 控制：移除所有原生校验属性（
required、pattern等），完全交由 JS +setCustomValidity()管理，再用input:invalid或自定义 class 如.is-error控制样式 - 若保留原生校验，务必在 JS 中监听
invalid事件并阻止默认提示（event.preventDefault()），否则会弹原生气泡
为什么 :invalid 标红没作用在边框或背景上？
因为 :invalid 的优先级可能被其他 CSS 覆盖，尤其当用了框架（如 Bootstrap）或重置样式时。更关键的是：某些浏览器（如旧版 Safari）对 :invalid 的伪类支持仅限于部分属性，border-color 通常没问题，但 background 或 box-shadow 可能需要额外声明。
input:invalid {
border-color: #d32f2f;
outline: 2px solid #f44336;
/* 加 !important 避免被 reset.css 覆盖 */
background-color: #fff8f8 !important;
}- 避免依赖继承：显式设置
border、color、background，不要只靠color: red - 测试时用 DevTools 检查 computed 样式，确认
:invalid规则是否被划掉（strikethrough） - 移动端 Safari 对
:invalid的触发时机较保守，建议搭配:focus:invalid增强反馈
兼容性底线和替代方案
:invalid 在 IE 中完全不支持，Edge 12–18 支持但有 bug（如对 type="number" 失效）。即使现代浏览器，也存在「表单未提交时，空 required 输入框立即标红」这种反直觉行为。
立即学习“前端免费学习笔记（深入）”；
- 最低兼容方案：用
input[data-invalid]配合 JS 动态增删属性，CSS 写成input[data-invalid] { border-color: #d32f2f; } - 如果项目已用 React/Vue，直接绑定
className={touched && !isValid ? "error" : ""}更可控 - 真正难处理的是组合校验（如「密码和确认密码不一致」），这类必须用 JS，
:invalid无能为力
实际项目里，:invalid 适合做「基础格式兜底提示」，但别指望它覆盖所有业务逻辑错误。样式能标红，状态却未必准——尤其是用户还没输完就触发了验证。
