CSS 信息状态样式：别再用 color: red 表达错误了

上周帮朋友改一个表单，他把所有“必填项未填”的提示都写成 color: red，连 loading 状态、成功提交、甚至“正在校验手机号”都用同一套红字加粗。我点开控制台一看，.error, .success, .loading, .validating 四个类名，样式却只有一行：color: #f00; —— 这不是在写 CSS，是在给浏览器发摩斯电码：全靠猜。

信息状态样式，从来不只是“换个颜色”。它是用户和界面之间最短的信任通道：红，得让人立刻停下操作；绿，要让人安心松手；灰，得明确告诉对方“这事轮不到你”；而蓝，最好带点呼吸感，别一上来就抢戏。

真正的状态样式，得同时回答三个问题：

• 用户此刻在做什么？（输入中 / 提交后 / 等待响应）
• 系统当前在想什么？（验证中 / 已通过 / 被拦截）
• 接下来该由谁来推进？（等我填完？等它返回？还是直接点下一步？）

所以，别急着翻色值表。先从四个最常被误用的状态入手，拆解它们该有的“行为逻辑”。

错误态（Error）：不是警示，是暂停键

很多人把 error 当成“报错广播”，拼命加动画、闪红框、弹 Toast。但真实场景里，用户往往正盯着输入框发愣——他需要的不是刺激，是可操作的暂停。
✅ 推荐做法：

• 边框用 #d32f2f（比纯红更稳），仅聚焦时才显示红色边框（避免页面加载即红，引发误判）；
• 错误文案紧贴输入框下方，字号不小于 14px，行高 1.5，不换行（“手机号格式不正确”比“格式错误”多 37% 的理解率）；
• 禁用提交按钮，但保留其视觉存在（透明度 0.6，不 display:none），否则用户会怀疑“按钮是不是坏了”。

成功态（Success）：低调收尾，不抢功劳

“提交成功！”弹窗还没消失，用户已经切到微信回消息了。成功反馈的核心任务，是确认动作已闭环，且无需用户再做任何事。
✅ 推荐做法：

• 输入框成功校验后，只加一个 2px 宽的 #2e7d32 底部边框（不是全边框），像签字笔轻轻画一道底线；
• 成功图标用 SVG 内联，stroke-width 设为 2，不填色，避免视觉过重；
• 若需文字提示，用 color: #1b5e20 + font-weight: 500，位置固定在输入框右内侧，不挤占空间。

加载态（Loading）：让等待有节奏感

旋转菊花图泛滥的根源，是把“系统忙”翻译成了“用户等”。其实用户不怕等，怕的是不知道等多久、等什么、能不能撤回。
✅ 推荐做法：

• 按钮加载时，文字缩为“…”（三个点），宽度保持不变，用 text-overflow: clip 防止跳动；
• 表单整体加载，用 ::before 在整个区域盖一层半透明白底（background: rgba(255,255,255,0.8)），叠加 3px 高的进度条色块（#1976d2）从左向右匀速移动；
• 关键：禁用所有交互元素，但保留 hover 样式（让用户知道“不是卡了，是真在跑”）。

禁用态（Disabled）：不是“灰掉”，是“退场”

opacity: 0.5 是最偷懒的禁用写法。它让按钮看起来像蒙了层灰，而不是主动退出流程。用户会下意识去点——因为视觉上它还在“场内”。
✅ 推荐做法：

• pointer-events: none 必加，禁用态必须物理隔绝点击；
• 颜色用 #bdbdbd（非 #9e9e9e），对比度保持 4.5:1 以上（保障可访问性）；
• 移除所有阴影、过渡、hover 效果，让它彻底“静音”；
• 如果是开关类组件，禁用时直接隐藏 toggle 滑块，只留轨道——暗示“此功能当前不可调”。

最后说个容易被忽略的细节：状态切换必须有过渡，但不能假惺惺。
比如从 loading 切到 success，别用 opacity 淡入淡出（用户会以为又卡了）。换成 transform: translateY(0) 配合 height: auto，或者干脆用 max-height 控制展开收起。关键在于：让状态变化像呼吸，而不是眨眼。

CSS 状态样式不是设计稿里的点缀，它是界面的语言学。红不是警告色，是“请停手”的语法；绿不是庆祝色，是“可移交”的句号。写对一个 .is-valid，比堆十层 !important 更接近前端的本质——让机器的逻辑，长出人的体温。