:invalid 伪类需配合 required、type、pattern 等验证属性才生效，首次失焦后稳定触发，但跨浏览器行为不一致（如 Safari/iOS 延迟响应），不可单独依赖，须结合 JS 的 checkValidity() 和 setCustomValidity() 实现可靠校验与状态清除。
怎么用 :invalid 让非法输入立刻变红
直接加 :invalid 伪类就行，但得注意：它只对带 required、min/max、pattern 等验证属性的表单控件生效，纯 input[type="text"] 没这些属性时，哪怕内容为空或乱输，:invalid 也不会触发。
常见错误是写了 input:invalid { border: 1px solid red; } 却没加 required，结果死活不红——不是 CSS 写错了，是 HTML 少了验证约束。
- 必须加验证属性，比如
required、type="email"、pattern="[0-9]{3}" -
:invalid在用户**首次失焦（blur）后才稳定生效**，输入过程中可能延迟响应（尤其 Chrome 对空required的处理） - 别依赖
:invalid做唯一校验，它不防 JS 修改、不拦 submit，只是视觉反馈
红色波浪线背景怎么实现又不遮文字
波浪线本质是用 background-image 画 SVG 或渐变，但直接套上去容易盖住文字或影响可读性。关键是把波浪线做在底层，且控制透明度和重复方式。
最稳的做法是用 SVG data URL 生成细波浪，设为 background-repeat: repeat-x，再用 background-position 压到底部边缘。
立即学习“前端免费学习笔记（深入）”；
- 用
background: url("data:image/svg+xml,...") no-repeat bottom left / 100% 1px控制高度和位置 - 避免用
border-bottom: 2px wavy red—— CSS 不支持wavy边框值，会退化成实线 - 如果同时要边框变红 + 波浪线，记得把
border和background分开写，别让 background 覆盖 border
input:invalid {
border-color: #d32f2f;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M0 5 Q2.5 3, 5 5 T10 5' stroke='%23d32f2f' stroke-width='1' fill='none'/%3E%3C/svg%3E");
background-repeat: repeat-x;
background-position: bottom left;
background-size: 10px 10px;
}
:invalid 在哪些浏览器里靠不住
Firefox 和 Safari 对 :invalid 的触发时机更“严格”：比如 input[type="email"] 输入 a@b，Chrome 可能立刻标红，Safari 得等到 blur 或 submit 才算 invalid；Firefox 还会把空 required 字段在页面加载完就标红，造成误报。
这意味着光靠 :invalid 做实时反馈，在跨浏览器场景下不可信。
- 不要假设用户一输错就看到红边——iOS Safari 基本不响应输入中的
:invalid - 若需强一致性反馈，得配合
input事件 +checkValidity()手动加 class -
:invalid对contenteditable或自定义组件完全无效，别试
为什么提交后还红着？怎么清掉
表单提交失败后，浏览器会保留 :invalid 状态，直到用户再次修改并满足验证规则。但用户改完一个字段，其他仍非法的字段还是红的，容易让人困惑。
真正可控的方式是：submit 失败后，手动重置所有字段的验证状态，或只清除已修正字段的 :invalid 样式。
- 调用
input.setCustomValidity('')可清除该字段的 invalid 状态（即使内容仍不合法） - 用
form.reportValidity()触发校验并滚动到首个错误，比单纯依赖:invalid更可靠 - 别用
form.reset()清红——它会清空所有值，用户体验断层
:invalid 是个快捷路，但它的触发逻辑藏在浏览器验证引擎里，而那个引擎各厂实现不一致。想稳，就得接受它只是辅助，关键反馈还得自己用 JS 补一手。 
