如何用CSS移除tabindex元素点击轮廓，仅保留Tab聚焦时的轮廓？

这问题我之前帮不少开发者解决过，核心就是要精准区分键盘触发的聚焦和鼠标/触摸/拖拽触发的聚焦——既满足可访问性要求（给键盘用户保留清晰的聚焦反馈），又能去掉点击时不必要的轮廓。下面给你两种靠谱的实现方式：

方法一：使用CSS :focus-visible 伪类（推荐） #

这是W3C推出的标准方案，现代浏览器都支持，完全不需要JS，是最简洁的解决办法。:focus-visible只会在聚焦是通过键盘操作（比如Tab键）触发时生效，鼠标点击或触摸元素不会触发这个伪类。

具体代码示例：

/* 先移除元素的默认聚焦轮廓 */
[tabindex], .your-target-elements {
  outline: none;
}

/* 仅当键盘聚焦时，显示自定义的聚焦样式 */
[tabindex]:focus-visible, .your-target-elements:focus-visible {
  outline: 2px solid #0066cc; /* 自定义轮廓颜色，可根据你的网站风格调整 */
  outline-offset: 2px; /* 可选：让轮廓和元素之间留一点间距，提升视觉体验 */
}

兼容性说明：Chrome、Firefox、Edge 早就支持这个伪类，Safari 从 15.4 版本开始支持。如果你的项目需要兼容更老的 Safari，可以搭配下面的JS方案做降级处理。

方法二：JavaScript 辅助区分触发方式 #

如果需要兼容不支持:focus-visible的旧浏览器，可以通过监听鼠标和键盘事件，给元素添加/移除类来控制轮廓显示：

第一步：添加JS事件监听 #

// 选择所有带tabindex的元素，或者你指定的目标元素
const focusableElements = document.querySelectorAll('[tabindex]');

focusableElements.forEach(el => {
  // 鼠标按下时，给元素添加一个临时类，标记是鼠标触发的交互
  el.addEventListener('mousedown', () => {
    el.classList.add('no-focus-outline');
  });

  // 鼠标松开后，延迟移除类（避免影响后续可能的键盘聚焦）
  el.addEventListener('mouseup', () => {
    setTimeout(() => el.classList.remove('no-focus-outline'), 100);
  });

  // 键盘Tab键触发时，移除临时类，确保聚焦轮廓正常显示
  el.addEventListener('keydown', (e) => {
    if (e.key === 'Tab') {
      el.classList.remove('no-focus-outline');
    }
  });
});

第二步：配合CSS控制轮廓 #

[tabindex] {
  outline: none;
}

/* 只有当元素聚焦且没有鼠标触发的临时类时，显示轮廓 */
[tabindex]:focus:not(.no-focus-outline) {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

重要注意事项 #

• 绝对不要完全移除所有聚焦样式！这会让键盘用户（比如依赖Tab键导航的用户）无法判断当前聚焦位置，严重违反可访问性规范。
• 如果你的页面有动态生成的元素（比如AJAX加载的内容），JS方案需要用事件委托来处理，避免遗漏新元素。

内容的提问来源于stack exchange，提问作者goltornate