:required伪类仅匹配含required属性的元素，不反映实时校验状态；实时提示需用:invalid伪类，配合required属性及必要js补漏。
required 伪类本身不能触发样式变化
很多人以为给 input 加了 required 属性，再写 :required 就能“自动提示”，其实不是。:required 只是匹配有该属性的元素，它不反映当前是否通过校验——也就是说，它不会在用户没填时变红、填了就恢复，它始终生效。真要实现「未填时显示提示」，得靠 :invalid 伪类，且需配合表单的原生验证状态。
:invalid 伪类才是实时反馈的关键
:invalid 在浏览器认为字段内容不符合约束（比如 required 未填、type="email" 格式错）时自动匹配。但注意：默认情况下，这个状态只在用户交互后（如失焦、提交）才激活，首次加载页面时即使为空也不会立刻触发。
- 必须保留
required属性，否则:invalid对空值无效 - 若想首次加载就高亮空必填项，可加
input:required:not(:placeholder-shown)作为补充（适用于有 placeholder 的场景） - 部分浏览器（如旧版 Safari）对
:invalid的触发时机较保守，建议加novalidate到form并手动控制验证逻辑，避免意外跳过
常见提示样式组合写法
单纯改边框颜色太弱，建议叠加图标、背景或文字提示。以下写法兼顾可访问性与视觉明确性：
input:required:invalid {
border-color: #d32f2f;
background-image: url("data:image/svg+xml,%3Csvg xmlns='https://www.php.cn/link/f1af9918adf75d2cfe2e87861a72f1f6' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23d32f2f' d='M6 0C2.69 0 0 2.69 0 6s2.69 6 6 6 6-2.69 6-6S9.31 0 6 0zm1 8H5V6h2V4h-2V2h2c1.1 0 2 .9 2 2v2c0 1.1-.9 2-2 2z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 12px;
}
<p>input:required:valid {
border-color: #2e7d32;
background-image: url("data:image/svg+xml,%3Csvg xmlns='<a href="https://www.php.cn/link/f1af9918adf75d2cfe2e87861a72f1f6">https://www.php.cn/link/f1af9918adf75d2cfe2e87861a72f1f6</a>' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%232e7d32' d='M6 0C2.69 0 0 2.69 0 6s2.69 6 6 6 6-2.69 6-6S9.31 0 6 0zm2 8l-3-3-1 1L4 8l-3-3-1 1L2 8l1 1 3-3 3 3z'/%3E%3C/svg%3E");
background-position: right 8px center;
background-size: 12px;
}- 用 data URL 内联 SVG，避免额外请求和 CORS 问题
-
:valid和:invalid需成对使用，否则填完后样式可能残留 - 移动端要注意
background-position在缩放下的偏移，建议用calc(100% - 8px)替代固定像素
兼容性与容易被忽略的细节
Chrome/Firefox/Edge 基本支持良好，但 Safari 对 :invalid 的初始状态处理仍有差异；更隐蔽的问题是：如果用户输入空格，required 字段仍算“已填”，:invalid 不会触发——这会让提示失效。
立即学习“前端免费学习笔记（深入）”；
- 解决空格问题：用
input:required:invalid:not(:placeholder-shown):not(:focus)+ JS 监听input事件 trim 后重置 validity - 屏幕阅读器依赖
aria-invalid和aria-describedby，纯 CSS 提示不可见时需同步更新这些属性 -
fieldset[disabled]会禁用所有子控件的伪类响应，调试时注意是否误套了禁用容器
真正稳定的提示效果，往往需要 CSS 伪类打底 + 少量 JS 补漏，而不是只靠一个 :required。
