:invalid 一加载就匹配空 required 输入框不是 bug，而是浏览器严格按 html5 规范将初始空值判定为非法；需用 input:invalid:not(:placeholder-shown) 区分未触碰与已输入错误状态。
为什么 :invalid 一加载就匹配空 required 输入框
这不是 bug，是浏览器严格按 HTML5 规范执行的结果：required 字段初始为空 → 浏览器判定为“非法值” → :invalid 立即生效。你没写错 CSS，只是没意识到这个状态从 DOM 渲染完成那一刻就存在了。
常见现象：页面打开瞬间所有 input[required] 全红边，用户还没点进去就看到满屏错误。
-
required是“必须非空”的硬约束，空值天然不满足，无需用户交互 -
type="email"或pattern字段在空值时默认是:valid（未验证态），但加了required就立刻变:invalid - 即使你没输任何内容、没失焦、没提交，
:invalid依然匹配 —— 它只看当前值是否违反约束，不看用户是否操作过
怎么让红框只在用户输错后才出现
核心是区分「未触碰」和「已输入且非法」。纯 CSS 可行，但必须加约束条件：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- HTML 中必须带
placeholder属性（哪怕只是空格：placeholder=" "），否则:not(:placeholder-shown)永远不成立 - 推荐组合：
input:invalid:not(:placeholder-shown)—— 这表示“值非法 + placeholder 已隐藏（即用户输过内容）” - 别用
input:focus:invalid：用户刚聚焦但还没输入时，空required也会匹配，反而更早触发 - 若需兼容老 Safari，
:user-invalid更稳妥（Chrome 102+ / Firefox 119+ / Safari 16.4+ 支持），它只在用户编辑后失焦才激活
:invalid 样式失效的常见原因
写了 input:invalid { border-color: red; } 却没反应，大概率不是选择器写错，而是验证链断了：
- 没加任何校验属性：
required、type="email"、pattern、minlength等缺一不可 - 用了
type="text"却期望邮箱校验 ——:invalid不认 JS 逻辑，只认原生约束 - 样式被覆盖：比如
input:focus规则写在后面，且设置了border-color，会盖掉:invalid - CSS reset 或
all: revert清掉了 UA 默认边框，导致border-color没效果；可加!important或显式设border: 1px solid
JS 配合时容易忽略的关键点
用 JS 主动控制校验状态时，:invalid 不会自动响应，必须触发校验流程：
-
input.setCustomValidity("错误信息")后，:invalid不会立刻更新 —— 必须调用input.reportValidity()或触发表单提交 -
input.checkValidity()只返回布尔值，不触发 UI 更新；reportValidity()才会刷新状态并应用样式 - 用
form.novalidate关闭默认提示后，:invalid仍生效，但需手动管理反馈时机（比如 submit 事件后加.was-validated类） -
invalid事件不冒泡，也无法阻止浏览器默认气泡提示；如需拦截，得靠event.preventDefault()在 submit 阶段
required 输入框，在 DOM ready 的瞬间就已经是 :invalid 了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
