css怎么去掉焦点框

# CSS怎么去掉焦点框

## 什么是焦点框？

焦点框（Focus Outline）是浏览器为可交互元素（如按钮、链接、输入框等）提供的默认视觉反馈。当用户通过键盘（Tab键）或鼠标点击与元素交互时，浏览器会显示一个轮廓线（通常为蓝色虚线或实线），用于指示当前获得焦点的元素。

## 为什么要去掉焦点框？

虽然焦点框对键盘导航用户至关重要，但在某些设计场景下，开发者可能希望移除它：
1. 视觉设计冲突，影响整体美观
2. 已经提供了自定义的焦点状态样式
3. 特殊交互场景需要隐藏默认反馈

> **注意**：完全移除焦点框会降低可访问性，建议始终提供替代的焦点样式。

## 常用去除方法

### 1. 使用`outline: none`

```css
button:focus, 
a:focus, 
input:focus {
  outline: none;
}

这是最直接的解决方案，但会完全移除所有焦点样式。

2. 更安全的替代方案

:focus {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 2px #4CAF50;
}

这样既保留了可访问性，又实现了自定义样式。

3. 仅对特定状态隐藏

button:focus:not(:focus-visible) {
  outline: none;
}

使用:focus-visible伪类可以区分鼠标点击和键盘导航场景。

最佳实践建议

1. 不要全局移除：只在必要时对特定元素移除

   /* 不推荐 */
   *:focus { outline: none; }
   

2. 提供替代样式：

   button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0,150,255,0.5);
   }
   

3. 考虑Windows高对比度模式：

   @media screen and (-ms-high-contrast: active) {
    button:focus {
      outline: 2px solid windowText;
    }
   }
   

浏览器兼容性

总结

虽然CSS可以轻松移除焦点框（outline: none），但从可访问性角度考虑，建议始终保留某种形式的焦点指示。最佳方案是自定义符合设计系统的焦点样式，确保所有用户都能清晰识别当前焦点元素。

<!-- 示例：完整的可访问解决方案 -->
<style>
  .custom-button:focus {
    outline: none;
    box-shadow: 0 0 0 3px #3a86ff;
    position: relative;
  }
  .custom-button:focus::after {
    content: "（当前焦点）";
    position: absolute;
    right: -80px;
  }
</style>