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