红边框是浏览器对空 required 字段的 :invalid 标准响应，非 bug；type="number" 输入中间态易触发频繁 :invalid，建议改 type="text"+pattern 或 js 校验；:invalid 需配合 required 等校验属性生效，自定义校验须调用 setcustomvalidity()。
为什么一加载就全是红边框？
因为 required 字段空值时，浏览器按规范直接判为 :invalid，不是 bug，是标准行为。页面渲染完成那一刻，状态就已确定。
- 加
placeholder后可用input:invalid:not(:placeholder-shown)暂时过滤初始红框，但 placeholder 不能替代校验逻辑 - 更精准的解法是
input:user-invalid：只在用户编辑过且当前值不满足约束时才匹配，Chrome 102+ / Firefox 119+ / Safari 17.4+ 支持 - 兼容旧环境必须用 JS：监听
input或blur，给字段加touched类，再写.touched:invalid
为什么输一半数字就闪红？
type="number" 对中间态极度敏感：输入 "12" 后按 "."、只打 "-"、甚至粘贴乱码，都会立刻触发 :invalid，导致边框频繁闪烁。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 这不是样式问题，是 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 可能不可见。
- 分离视觉维度：用
border-color表达验证结果，用box-shadow（比outline更稳）表达聚焦状态 - 显式组合规则，例如：
input:invalid:not(:focus) { border-color: #e53e3e; }+input:focus { box-shadow: 0 0 0 2px #3182ce; } - 别给
: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()
:user-invalid 是最干净的解法，但 Safari 17.4 之前版本不支持；JS 手动控制 touched 类或 is-invalid 类仍是目前最可控、最易调试的路径。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
