聚焦Focus
你可能会说
Tab 键切换的时候看不出当前停在哪，能不能给个明显的框？
控件当前接收键盘输入与用户操作焦点的激活状态。按 Tab 键浏览链接和按钮、点击输入框时都会看到 focus；清楚的描边能告诉键盘用户下一次按键会作用在哪里。若替换浏览器默认 outline，必须提供同样明显且对比度足够的焦点样式，不能只在鼠标点击时保留。
也常被叫作聚焦态焦点状态:focus
什么时候用
什么时候不用
- 使用 outline: none却未提供替代焦点样式：键盘用户无法定位焦点outline: none
- 焦点描边对比度不足：用户难以区分聚焦状态保存
- 用 div 模拟按钮：若未补全语义和键盘交互，Tab 与读屏用户无法正常操作<div onclick>
- tabindex 顺序不合理：焦点移动顺序会偏离阅读和操作流程② 姓名① 邮箱③ 电话
组成结构 · Anatomy
输入中…描边 2px+Tab → 下一个
当前拿到焦点的那个控件
告诉所有人“焦点在这儿”
Tab 键的行进路线，默认按 DOM 顺序
常见变体 · Variants
描边Outline
按钮
浏览器默认焦点样式已经清楚可见时
光晕Ring
输入框
品牌色外发光，更现代
背景高亮Background
菜单项
列表、菜单项聚焦时用
典型使用场景
键盘 Tab 浏览表单
完善资料
Tab ⇥ 将焦点移动到下一个可聚焦元素
输入框聚焦输入
这个配色方案不错
聚焦输入：描边与外圈共同标出当前输入位置
屏幕阅读器导航
快捷键直达搜索框
🔍
主题切换
⌘K
延伸阅读 · 权威出处