:invalid 和 :user-invalid 伪类可实现必填项空值高亮，但需配合 :not(:placeholder-shown) 及 JavaScript 触发校验；纯 CSS 无法绕过用户交互前提，推荐组合使用并兼容旧浏览器。
required 伪类本身不触发高亮，得靠 :invalid 或 JavaScript 检测
浏览器不会仅因 required 属性就自动给元素加视觉反馈；:required 伪类只匹配有 required 属性的元素，但它不表示“当前未填”或“校验失败”。真正能反映必填项空状态的是 :invalid —— 它在字段为空且标记为 required 时自动生效（前提是表单未提交过）。
但注意：刚加载页面时，:invalid 默认不会激活（因为用户还没交互），所以首次打开表单看不到高亮。这是常见困惑点。
-
:invalid在用户聚焦后又失焦（blur）、或提交表单失败后，才会稳定触发 - 若想“一进页面就高亮所有空必填项”，必须用 JavaScript 主动触发表单校验，例如调用
form.reportValidity() - 仅靠 CSS 无法绕过这个交互前提；纯样式方案只能响应用户行为后的状态
用 :invalid + :user-invalid 实现更可靠的空值高亮
:user-invalid 是较新标准（Chrome 102+、Firefox 119+、Safari 16.4+ 支持），它比 :invalid 更精准：只在用户与字段交互过（输入、聚焦/失焦、粘贴等）且校验失败时才匹配。避免了 :invalid 在初始加载或未操作时误触发的问题。
推荐组合写法：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
input:required:invalid:not(:placeholder-shown),
input:required:user-invalid {
border-color: #e74c3c;
outline: 2px solid #f8d7da;
}
-
:not(:placeholder-shown)排除 placeholder 还在显示的场景（防止 placeholder 存在时误判为空） - 对
textarea和select需单独补充规则，它们不支持:placeholder-shown - 旧浏览器不支持
:user-invalid时，回退到:invalid即可，不影响功能，只是初始状态略保守
submit 事件中阻止默认行为并手动高亮所有 required 字段
当用户点击提交但校验失败时，submit 事件里调用 event.preventDefault() 后，可以遍历所有 required 字段，主动添加 class 或设置 style，确保视觉反馈明确。
关键点不是“阻止提交”，而是“让所有必填项立刻可感知”：
- 用
form.querySelectorAll('input[required], select[required], textarea[required]')找出全部必填控件 - 对每个元素检查
!element.value.trim()（注意select要查selectedIndex === 0且其首个 option 无 value 或 value=""） - 添加临时 class 如
is-missing，配合 CSS 设置边框/背景色，比依赖伪类更可控 - 别忘了在用户开始输入后移除该 class，否则会干扰后续校验
移动端 focus 时键盘弹出导致滚动错位，高亮样式被遮挡
在 iOS Safari 或部分安卓浏览器中，给空的 input 添加红色边框后立即 focus()，键盘弹出会触发页面滚动，常把高亮字段滚到视口外——用户根本看不到提示。
解决思路不是禁用 focus，而是延迟或条件触发：
- 不在
submit处理中直接input.focus()，改用scrollIntoView({ behavior: 'smooth', block: 'center' })定位第一个缺失字段 - 对
input做focus前加setTimeout(() => el.focus(), 300)，等键盘动画启动后再聚焦，减少错位 - CSS 上给表单容器加
scroll-margin-top: 20px，让scrollIntoView留出顶部安全距离
高亮本身容易做，但让用户“一眼看到问题在哪”，才是实际落地时最常卡住的地方。
