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 提升可读性
错误状态下让占位符文字也变色，强化提示：

							

								
								

									arXiv Xplorer
									
ArXiv 语义搜索引擎，帮您快速轻松的查找，保存和下载arXiv文章。
								
								下载 
							
						
立即学习“前端免费学习笔记（深入）”；

  
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 实现更灵活布局（需额外包裹容器）