:invalid伪类可直接实现原生表单验证错误样式，但仅对含required/type/pattern等约束的输入生效，且默认失焦或提交后才触发；需配合:not(:placeholder-shown)或:user-invalid避免初始误判，优先改border而非outline，并注意样式优先级与框架兼容性。

用 :invalid 伪类加 outline 或 border 最直接

浏览器原生表单验证触发后，:invalid 会自动作用于校验失败的 （如空必填、邮箱格式错、min/max 超限），无需 JS 干预。但注意：它默认只在用户交互后（如失焦或提交）才生效，首次加载时不会匹配空必填字段。

实操建议：

• 优先改 border 而非 outline，避免覆盖系统焦点样式；写成 border: 2px solid #e53e3e;
• 加上 transition: border-color 0.15s; 让红框出现更柔和
• 若需兼容老版本 Safari（:invalid 对未聚焦的空必填不触发），可配合 :user-invalid（Chrome/Firefox 支持更好）
• 别只依赖 :invalid 显示错误——它无法区分“用户还没输”和“输错了”，业务逻辑仍需 JS 配合判断状态

:focus-within 和 :has() 能让错误提示靠近输入框

单纯红框不够，用户常需要文字提示。用 :focus-within 可在父容器获得焦点时显示提示，而 :has(:invalid)（现代浏览器）能精准定位到含无效子项的容器，比如把错误信息放在

里：

div.field:has(input:invalid) label { color: #e53e3e; }
div.field:has(input:invalid) input { border-color: #e53e3e; }

注意点：

• :has() 目前不支持在 CSS 文件中用于表单验证的动态更新（部分浏览器有延迟），生产环境建议降级为 JS 切换 class
• :focus-within 在输入框获得焦点时就触发，可能早于验证时机，慎用于纯错误态控制
• 错误提示元素必须与 input 同级或在共同父容器内，否则选择器失效

为什么 :required:invalid:not(:placeholder-shown) 更准？

这个组合选择器能排除“空必填但 placeholder 还在”的误判场景，比单独 :invalid 更贴近真实错误意图：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• :required 限定是必填字段
• :not(:placeholder-shown) 确保用户已开始输入（placeholder 消失），避免一进页面就红框
• 对 type="email" 这类非空但格式错的字段，:placeholder-shown 不适用，此时要回退到 :user-invalid 或 JS 标记
• 移动端 iOS Safari 对 :placeholder-shown 支持不稳定，测试时务必真机检查

红框被其他样式覆盖？查这三处

常见红框不显示，往往不是伪类没生效，而是被更高优先级规则压住：

• 检查是否有全局重置样式（如 normalize.css）设置了 input { border: 1px solid #cbd5e0; } 且未加 !important 或 specificity 不够
• 确认是否用了 appearance: none; 却忘了重新定义 border —— 它会清掉默认边框，也清掉伪类继承的边框
• 如果 input 包在组件库（如 Ant Design、Element Plus）里，它们通常用 class 控制状态，CSS 伪类默认无效，必须通过库提供的 error class 或自定义 theme 变量来改

复杂点在于：伪类只响应原生 validity 状态，而 React/Vue 的受控组件、第三方校验库（如 Yup、Zod）触发的错误，不会自动影响 DOM 的 validity，这时候红框和业务错误提示容易脱节。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！