:invalid伪类可自动为未通过原生验证的表单控件（如required、type="email"等）添加红边框；需配合:placeholder-shown或:user-invalid延迟提示，并可用:valid提供绿色正向反馈。
直接用 :invalid 伪类就能自动给表单控件标红边框，前提是元素本身支持原生验证（如 required、type="email"、min/max 等），且尚未通过验证。
确保表单控件启用原生验证
只有带验证约束的表单元素才会触发 :invalid。例如：
<input required><input type="email" required><input type="number" min="1" max="100"><select required><option value="">请选择</option></select>
没加 required 或其他验证属性的输入框，即使为空也不会被识别为 :invalid。
用 :invalid 设置红边框样式
在 CSS 中直接写：
立即学习“前端免费学习笔记（深入）”；
input:invalid,
select:invalid,
textarea:invalid {
border-color: #e53e3e;
border-width: 2px;
}
注意：默认情况下，:invalid 在用户还没交互时就可能生效（比如页面一加载空的 required 输入框就被标红）。如果想等用户操作后再提示，可结合 :user-invalid（较新标准，Chrome 107+ / Safari 16.4+ 支持）或用 JavaScript 控制 class。
避免干扰已填写但不合法的内容
比如邮箱输入 abc，它会一直保持 :invalid；而输入 abc@ 同样无效。若想更友好，可叠加 :focus 或 :not(:placeholder-shown) 来限定触发时机：
input:invalid:not(:placeholder-shown) {
border-color: #e53e3e;
}
前提是设置了 placeholder，且用户已开始输入（即 placeholder 已隐藏）才标红，减少初始误报。
配合 :valid 做正向反馈
可以顺便给通过验证的字段加绿色边框，提升体验：
input:valid {
border-color: #38a169;
}
这样用户能直观看到哪些已填对、哪些还需修改。
基本上就这些。不需要 JS 就能实现基础错误标记，简单直接，但要注意浏览器兼容性和交互节奏，避免过早打扰用户。
