CSS如何当输入不合法时让表单变红_利用:invalid伪类和红色波浪线背景-css教程-PHP中文网

:invalid 伪类需配合 required、type、pattern 等验证属性才生效，首次失焦后稳定触发，但跨浏览器行为不一致（如 safari/ios 延迟响应），不可单独依赖，须结合 js 的 checkvalidity() 和 setcustomvalidity() 实现可靠校验与状态清除。

css如何当输入不合法时让表单变红_利用:invalid伪类和红色波浪线背景

怎么用 `: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 压到底部边缘。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

用 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 做实时反馈，在跨浏览器场景下不可信。