17370845950

:focus伪类用于控制可聚焦元素获键盘焦点时的样式，需确保元素默认可聚焦或通过tabindex属性设置，应避免禁用outline而无替代视觉反馈，推荐使用:focus-visible提升交互准确性。

用 :focus 伪类可以精准控制元素获得键盘焦点时的样式，比如点击输入框、按 Tab 键切换到按钮等场景。关键在于：只有可聚焦元素（如 、、带 tabindex 的元素）才能触发 :focus；默认浏览器会加 outline，通常需手动覆盖或优化。

确保元素本身能获取焦点

不是所有元素默认可聚焦。常见可聚焦元素包括：input、textarea、button、select、a（含 href 时）。其他元素（如 div、span）需显式添加 tabindex 属性：

• tabindex="0"：纳入自然 Tab 顺序，可聚焦也可键盘操作
• tabindex="-1"：不能通过 Tab 进入，但可通过 JavaScript 调用 .focus() 获取焦点
• 避免使用 tabindex > 0，会打乱页面逻辑顺序，影响可访问性

基础:focus样式写法与注意事项

直接在选择器后加 :focus 即可定义聚焦态样式。常用组合写法：

• input:focus { border-color: #007bff; box-shadow: 0 0 0 2px rgba(0,123,255,.25); }
• button:focus { outline: none; background-color: #0069d9; }（慎用 outline: none，务必提供替代视觉反馈）
• 推荐保留或美化 outline，例如：outline: 2px solid #007bff; outline-offset: 2px;

配合:focus-visible提升体验

只在键盘操作触发焦点时显示高亮（避免鼠标点击后也出现），可用 :focus-visible —— 更符合用户实际交互意图：

• button:focus-visible { outline: 2px solid #007bff; }
• input:focus-visible { box-shadow: 0 0 0 3px rgba(0,123,255,.25); }
• 注意兼容性：现代 Chrome/Firefox/Edge 支持良好，Safari 需较新版本；可搭配 @supports 安全降级

避免可访问性陷阱

移除默认 outline 时，必须提供清晰、足够对比度的替代焦点指示，否则对键盘用户极不友好：

• 禁用 outline: none 后，至少用 border、box-shadow 或背景色变化明确标出当前焦点位置
• 确保焦点样式在深色/浅色模式下都可见（测试对比度 ≥ 4.5:1）
• 不要仅靠颜色区分状态，可叠加图标、粗边框或尺寸变化增强识别性