交互状态与表单样式

这一节要完成什么

给链接、按钮和表单设计 hover、focus、disabled 与错误状态，保持键盘焦点清楚。

先理解：为什么要学它

不要使用 outline: none 后不提供替代。

跟着做

a:hover {
  color: #9a3412;
}
:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 3px;
}
input,
textarea,
select,
button {
  font: inherit;
}
input:invalid:not(:placeholder-shown) {
  border-color: #b91c1c;
}
button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

1. 用 Tab 走过页面，先记录浏览器默认焦点，再添加 focus-visible。
2. 给表单控件继承字体，确保点击区域至少约 44px 高。
3. 输入无效邮箱，确认边框变化之外仍有浏览器文字提示。
4. 检查 hover 与 focus 都能看出状态，不能只照顾鼠标。

关键代码怎么读

• 不要使用 outline: none 后不提供替代。
• :focus-visible 让键盘焦点明显，同时避免每次鼠标点击都出现轮廓。
• 错误状态要有文字说明，不能只有红色。

常见错误：看到什么，检查什么

自己完成一次

完成反馈表单的普通、焦点、无效和禁用四种状态，并截图记录。

完成检查

• 我完成了本节要求的可见结果
• 我能解释关键代码的输入、处理和输出
• 我测试了正常、边界和错误情况