:user-invalid伪类可精准控制用户编辑后校验失败的表单样式，避免页面加载时误触发；支持红边、变色占位符及SVG错误图标等视觉反馈，现代浏览器兼容性良好。
<p>直接用 <code>:invalid</code> 伪类就能给校验失败的表单元素加样式，但要注意它只对带 HTML5 校验属性（如 <code>required</code>、<code>type="email"</code>、<code>min</code>/<code>max</code> 等）且当前值不满足规则的元素生效，且默认仅在用户交互后（比如失焦或提交）才触发。</p>
<H3>基础错误样式写法</H3>
<p>给输入框加红边、背景或图标提示最常用：</p>
<p><font color="#888"><strong>HTML 示例：</strong></font><br>
<code><input type="email" required placeholder="请输入邮箱"></code></p>
<p><font color="#888"><strong>CSS 示例：</strong></font><br>
<code>input:invalid {<br>
border-color: #e74c3c;<br>
background-color: #fdf2f2;<br>
}</code></p>
<H3>避免误触发：配合 :user-invalid 更精准</H3>
<p><code>:invalid</code> 在页面刚加载时可能就生效（比如空的 <code>required</code> 输入框），影响体验。推荐优先用 <code>:user-invalid</code> —— 它只在用户编辑过且当前值无效时才匹配，更符合实际反馈逻辑：</p>
<ul>
<li>支持现代浏览器（Chrome 88+、Firefox 76+、Safari 15.4+）</li>
<li>写法和 <code>:invalid</code> 完全一致，只需替换伪类名</li>
<li>例如：<code>input:user-invalid { border: 2px solid #d32f2f; }</code></li>
</ul>
<H3>配合 ::placeholder 提升可读性</H3>
<p>错误状态下让占位符文字也变色，强化提示：</p>
<ul>
<li><code>input:user-invalid::placeholder { color: #ad1457; opacity: 0.8; }</code></li>
<li>注意：部分浏览器需加私有前缀（如 <code>::-webkit-input-placeholder</code>），但主流已支持标准写法</li>
</ul>
<H3>自定义错误图标（用 background-image 或伪元素）</H3>
<p>在输入框右侧加 ❌ 图标，直观醒目：</p>
<ul>
<li>用 <code>background</code> 方式（推荐）：<br>
<code>input:user-invalid {<br>
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");<br>
background-repeat: no-repeat;<br>
background-position: right 8px center;<br>
padding-right: 32px;<br>
}</code></li>
<li>或用 <code>::after</code> + <code>position: relative</code> 实现更灵活布局（需额外包裹容器）</li>
</ul>
