红边框是浏览器对空required字段的标准:invalid响应，并非bug；type="number"输入中途易触发无效状态致闪烁；需用input:user-invalid或JS手动控制touched类；:focus与:invalid样式应分离border和box-shadow；:invalid生效需校验属性或setCustomValidity()。

为什么一加载页面就全是红边框？

因为 required 字段空值时，浏览器按规范直接判为 :invalid，不是 bug，是标准行为。页面渲染完成那一刻，状态就已确定。

• 用 input:invalid:not(:placeholder-shown) 可临时过滤（前提是加了 placeholder 属性），但 placeholder 不能替代校验逻辑
• 更精准的解法是 input: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 边框，仅靠 JS 在 blur 或 change 时反馈
• 移动端软键盘数字键常不触发 blur，需额外监听 change 或表单提交

怎么让 :focus 和 :invalid 样式不打架？

直接写 input:focus:invalid { border-color: red; } 会覆盖 focus 的高亮效果，尤其在 Windows 高对比模式下 outline 可能不可见。

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

• 分离视觉维度：用 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; }

为什么写了 :invalid 却没反应？

:valid 和 :invalid 只对参与原生校验的元素生效，不是所有 input 都能触发。

立即学习“前端免费学习笔记（深入）”；

• 必须至少有一个校验属性：required、type="email"、minlength、pattern、min/max
• type="phone" 这类自定义 type 会被降级为 text，失去所有校验能力
• 自定义校验（如用户名唯一性）必须调用 setCustomValidity()，否则伪类完全不响应；每次校验后都得调用，漏一次状态就卡住
• 想“每敲一个键都实时反馈”，光靠伪类做不到——必须监听 input 事件并主动调用 el.checkValidity()

真正难的是让校验反馈节奏匹配用户操作：防抖后的实时校验、提交时批量标记、以及清除错误后如何重置 —— 这些细节不写 JS 就绕不开。