当然!你也可以使用*从所有HTML元素中删除蓝色边框

*{
    outline-color: transparent;
    outline-style: none;
  }

And

 *{
     outline: none;   
   }

当然!你也可以使用*从所有HTML元素中删除蓝色边框

*{
    outline-color: transparent;
    outline-style: none;
  }

And

 *{
     outline: none;   
   }

我在一个有点击事件的div上经历了这一点，在20次搜索之后，我发现这个片段挽救了我的一天。

-webkit-tap-highlight-color: rgba(0,0,0,0);

这将禁用webkit移动浏览器中的默认按钮高亮显示

这种效果也会发生在非输入元素上。我发现下面是一个更通用的解决方案

:focus {
  outline-color: transparent;
  outline-style: none;
}

更新:您可能不必使用:focus选择器。如果你有一个元素，说<div id="mydiv">stuff</div>，你得到了这个div元素的外部发光，就像正常应用:

#mydiv {
  outline-color: transparent;
  outline-style: none;
}

如果你想移除Bootstrap中按钮的辉光(在我看来这并不一定是糟糕的用户体验)，你需要以下代码:

.btn:focus, .btn:active:focus, .btn.active:focus{
  outline-color: transparent;
  outline-style: none;
}

这是为那些关心可访问性的人提供的解决方案。

请不要使用outline:none;用于禁用焦点轮廓。如果你这样做，你是在扼杀网络的可访问性。有一种可行的方法。

看看我写的这篇文章，它解释了如何以一种可访问的方式删除边界。

简而言之，当我们检测到键盘用户时，只显示轮廓边框。一旦用户开始使用他的鼠标，我们禁用大纲。结果你得到了两者中最好的。