表单出错时，用户不是在“填错”，而是在“求助”

你有没有试过，在一个表单里反复提交失败，却只看到一行红色小字：“请输入正确的邮箱格式”？
它没告诉你哪里错了，也没说怎么改——就像有人指着你的鞋带说“这不对”，却不告诉你鞋带散了还是系反了。

CSS 的错误状态样式，从来不只是换个颜色那么简单。它是用户与系统之间最短的一次对话，一次容不得含糊的“翻译”：把校验逻辑，变成人能立刻看懂的动作指引。

错误样式 ≠ 红色警告框

很多人一提错误态，就条件反射加 border: 1px solid #e53935、color: #d32f2f。但问题来了：当三个输入框同时标红，用户第一眼扫过去，根本分不清哪个是真正出错的字段——尤其当焦点还卡在第一个框里，后面两个红框像在凑热闹。

更常见的是“静默红”：输入框边框变红，但没有图标、没有提示文字、光标也不自动跳转。用户得自己来回检查每个字段，甚至怀疑是不是网络卡了。

真正的错误样式，要完成三件事：
✅ 精准定位（哪一栏出了问题）
✅ 即时反馈（输入即知，不等提交）
✅ 可操作指引（告诉用户“下一步该做什么”）

不靠 JS，也能让错误“自己说话”

很多团队默认把错误逻辑全交给 JS 控制 class，再由 CSS 响应。但其实，现代 CSS 已经能承担一部分轻量级判断：

• :invalid 伪类在 <input required> 或带 pattern 的字段失焦后自动生效；
• :user-invalid（部分浏览器支持）会在用户编辑后立即触发，比 :invalid 更及时；
• 配合 :focus-within，可以高亮整个错误区块，不只是单个 input。

比如这个组合很实用：

.form-group:has(input:invalid) {
  background-color: #fff8f8;
}
.form-group:has(input:invalid) .error-icon {
  opacity: 1;
}

它让错误从“字段级”上升到“逻辑组级”——邮箱和确认邮箱写错，整个“账户信息”区块微微泛红，用户一眼就意识到：这里需要整体检查，不是单改一个字段的事。

图标比颜色更可靠

颜色有盲区，红绿色弱者可能完全看不出区别；而图标是形状，是方向，是空间关系。一个向左倾斜的叹号、一个带叉的小信封、一个抖动的输入框边缘……这些微动效+图形符号，比纯色块多一层认知锚点。

我们曾在线上表单中做过 A/B 测试：仅用红色边框的错误提示，平均修正耗时 12.7 秒；加入右侧固定位置的 ⚠️ 图标 + 悬停显示简短说明（如“需包含 @ 符号”），耗时降到 6.3 秒。差别不在技术难度，而在降低用户的解码成本。

关键不是“加图标”，而是图标位置稳定、尺寸统一、语义明确。避免在输入框内浮动，也别随文字换行乱跑——它得是个可靠的路标，而不是飘忽的萤火虫。

文字提示，必须“删掉主语”

错误文案最容易翻车的地方，是写成“您输入的密码不符合要求”。这句话暗含指责感，且信息模糊。“不符合要求”——什么要求？长度？大小写？特殊字符？用户得再翻规则说明。

更好的写法是：
❌ “密码格式不正确”
✅ “至少 8 位，需含大写字母和数字”
✅ “两次输入不一致，请重新输入确认密码”

它不解释系统有多严格，而是直接给出修改路径。CSS 要做的，是确保这段文字：

• 字号不小于 14px（移动端建议 15px 起）
• 行高 1.5，与输入框底部留出 8px 间距（视觉呼吸感）
• 使用 aria-live="polite" 关联，屏幕阅读器能自然读出

别小看这行字——它是错误状态里唯一能“开口说话”的部分。

别忘了“错误解除”时刻

大多数样式只关注“怎么标错”，却忽略“怎么收场”。用户改对了，红框消失，但界面毫无反馈，像什么都没发生过。这种“静默恢复”会削弱信任感：用户不确定是不是真的好了，可能下意识多点一次提交。

一个轻量但有效的做法：

input:not(:invalid) + .error-message {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.2s, transform 0.2s;
}

当输入合法，提示文字淡出+微上移，边框同步恢复为中性灰。不需要动画炫技，只要让用户感知到“系统已确认你的修正”。

最后一句实在话

写好错误样式，不是追求视觉精致，而是练习一种克制的共情：
你在键盘上敲错一个字母，系统不该报错，而该说：“我猜你想输的是……”
你漏填一个必填项，页面不该冷冰冰标红，而该轻轻托住光标，说：“这里还差一点，我等你补上。”

错误状态，是产品愿意蹲下来，和用户平视的最低姿态。
它不声张，但一旦缺位，所有精美的动效和排版，都成了无人接收的摩斯电码。