:focus-visible 伪类能智能区分键盘与鼠标操作，仅在键盘导航时显示焦点框，提升可访问性与视觉体验；建议用其替代 outline: none，并通过 @supports 处理兼容性，确保表单对所有用户友好。
在表单交互中，焦点样式是提升可访问性和用户体验的关键。但默认的
:focus样式常被开发者移除，因为鼠标点击时也会触发，影响视觉整洁。
:focus-visible提供了一个更智能的解决方案——它只在键盘导航时显示焦点框，保留鼠标操作的简洁界面。
理解 :focus-visible 的行为逻辑
:focus-visible是一个伪类，浏览器会根据用户输入方式自动判断是否应用样式。当用户使用 Tab 键导航时，该伪类生效；而用鼠标点击时则不触发。
这意味着你可以安全地为键盘用户提供清晰的焦点指示，同时避免鼠标用户看到“突兀”的轮廓线。
示例：
立即学习“前端免费学习笔记（深入）”；
input:focus {
outline: none; /* 不推荐全局清除 */
}
input:focus-visible {
outline: 2px solid #005fcc;
outline-offset: 2px;
}提升表单可用性的实践建议
合理使用
:focus-visible能让表单对所有用户都更友好，尤其是依赖键盘或屏幕阅读器的人群。
- 不要完全去除 focus 样式，这会让键盘用户迷失当前操作位置
- 用
:focus-visible
替代粗暴的outline: none
，实现体验平衡 - 确保焦点框颜色与背景有足够对比度，符合 WCAG 可访问性标准
- 可结合轻微背景色变化或边框加粗，增强视觉反馈
处理浏览器兼容性
目前主流现代浏览器都支持
:focus-visible，但旧版本 Safari 和部分移动端需注意。
可通过
@supports提供降级方案： ```css @supports not (focus-visible) { input:focus { outline: 2px solid #005fcc; } } ```
或者使用 JavaScript 补丁（如 focus-visible Polyfill）来统一行为。
基本上就这些。正确使用
:focus-visible能让你的表单既美观又无障碍，兼顾不同用户的操作习惯。
