刚打开页面就全是红边框是因为浏览器将空的required输入框默认判为无效，:invalid伪类立即生效；输一半变红是type="number"对中间态敏感；应分层表达状态，用border-color表验证结果、box-shadow表聚焦，禁用:invalid的transition，并通过JS绑定input事件+checkValidity()实现实时反馈。
为什么刚打开页面就全是红边框？
因为浏览器把空的 required 输入框默认判为无效，:invalid 一渲染就匹配——这不是 bug，是规范行为。哪怕用户还没点进去，input:invalid 就已生效。
常见错误现象：表单加载完，所有必填项全红；用户第一眼看到的是错误暗示，不是引导。
- 用
input:invalid:not(:placeholder-shown)可临时过滤（前提是加了placeholder属性） - 更精准的方案是改用
:user-invalid：只在用户编辑过且当前值不满足约束时触发，Chrome 102+ / Firefox 119+ / Safari 17.4+ 支持 - 兼容旧环境必须靠 JS：监听
input或blur，手动加touched类，再写.touched:invalid
type="number" 为什么输一半就变红？
type="number" 对中间态极度敏感：输入 "12" 后按 "."，或只打 "-"，甚至粘贴含字母的内容，都会立刻触发 :invalid，导致边框频繁闪烁。
这不是样式写错了，是 type 语义与输入过程的天然冲突。
立即学习“前端免费学习笔记（深入）”；
- 推荐改用
type="text"+pattern="[0-9]*"（注意 pattern 值不带斜杠） - 若必须用
type="number"，CSS 中禁用:invalid边框，仅在blur或change时由 JS 反馈 - 移动端需额外监听
change或表单提交，因为软键盘数字键常不触发blur
怎么让边框变色不盖掉 focus 高亮？
直接写 input:focus:invalid { border-color: red; } 会吃掉 focus 的 outline 或 box-shadow，尤其在 Windows 高对比度模式下 outline 可能不可见。
关键不是“怎么加红”，而是“怎么分层表达状态”：
- 用
border-color表达验证结果（合法绿 / 非法红） - 用
box-shadow（比outline更可靠）表达聚焦状态 - 显式写出组合规则：
input:focus { box-shadow: 0 0 0 2px #3182ce; }、input:invalid:not(:focus) { border-color: #e53e3e; }、input:focus:invalid { border-color: #e53e3e; } - 别给
:invalid加transition：错误反馈需要明确即时；若整体有过渡，单独重置input:invalid { transition: none; }
怎样做到“每敲一个键都实时反馈”？
:valid/:invalid 本身不响应 input 事件——浏览器默认只在失焦或提交时校验。所谓“实时”，必须靠 JS 主动触发。
最简可行做法：
- 给字段绑定
input事件（别用change，它等失焦） - 在回调里调用
el.checkValidity()，强制更新伪类状态 - 若需区分错误类型（如邮箱格式错 vs 必填为空），读取
el.validity.typeMismatch或el.validity.valueMissing，再手动加 class - 自定义校验（如用户名唯一性）必须调用
setCustomValidity()，否则:valid/:invalid完全不响应
真正容易被忽略的点是：伪类只对参与原生校验的元素生效。纯 input type="text" 即使绑了 JS，也不会被标记为 :invalid —— 必须至少有一个校验属性：required、type="email"、minlength、pattern、min/max。
