css表单校验失败样式怎么写_通过css:invalid伪类提示错误

:user-invalid 伪类可精准控制用户编辑后校验失败的表单样式，避免页面加载时误触发；支持红边、变色占位符及 SVG 错误图标等视觉反馈，现代浏览器兼容性良好。

直接用 :invalid 伪类就能给校验失败的表单元素加样式，但要注意它只对带 HTML5 校验属性（如 required、type="email"、min/max 等）且当前值不满足规则的元素生效，且默认仅在用户交互后（比如失焦或提交）才触发。
基础错误样式写法
给输入框加红边、背景或图标提示最常用：
HTML 示例：
 zuojiankuohaophpcninput type="email" required placeholder="请输入邮箱"youjiankuohaophpcn
CSS 示例：
 input:invalid {
 border-color: #e74c3c;
 background-color: #fdf2f2;
 }
避免误触发：配合 :user-invalid 更精准
:invalid 在页面刚加载时可能就生效（比如空的 required 输入框），影响体验。推荐优先用 :user-invalid —— 它只在用户编辑过且当前值无效时才匹配，更符合实际反馈逻辑：
支持现代浏览器（Chrome 88+、Firefox 76+、Safari 15.4+）
写法和 :invalid 完全一致，只需替换伪类名
例如：input:user-invalid {border: 2px solid #d32f2f;}
配合 ::placeholder 提升可读性
错误状态下让占位符文字也变色，强化提示：
立即学习 “ 前端免费学习笔记（深入）”；
input:user-invalid::placeholder {color: #ad1457; opacity: 0.8;}
注意：部分浏览器需加私有前缀（如 ::-webkit-input-placeholder），但主流已支持标准写法
自定义错误图标（用 background-image 或伪元素）
在输入框右侧加 ❌ 图标，直观醒目：
用 background 方式（推荐）：
 input:user-invalid {
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'viewBox='0 0 16 16'fill='%23d32f2f'%3E%3Cpath d='M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zM5.5 9.5l1.5 1.5 2.5-2.5 2.5 2.5 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5-2.5 2.5-2.5-2.5-1.5 1.5 2.5 2.5-2.5 2.5z'/%3E%3C/svg%3E");
 background-repeat: no-repeat;
 background-position: right 8px center;
 padding-right: 32px;
 }
或用 ::after + position: relative 实现更灵活布局（需额外包裹容器）