如何删除点击html元素周围的虚线

Question

我发现如果页面中有一个a链接没有链接到新页面，那么当用户点击它时，元素周围会有一条虚线，它只会在用户消失时消失点击页面中的其他内容，如何删除？

示例：

注意元素Section 2周围的虚线。

Answer 1

使用outline:none锚定标记类

Answer 2

像@Lo Juego所说，阅读文章

a, a:active, a:focus {
   outline: none;
}

Answer 3

a {
    outline: 0;
  }

但是在改变它之前阅读这个：

removing-the-dotted-outline

Answer 4

删除所有虚线轮廓，包括bootstrap主题中的那些。

a, a:active, a:focus, 
button, button:focus, button:active, 
.btn, .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn.focus:active, .btn.active.focus {
    outline: none;
    outline: 0;
}

input::-moz-focus-inner {
    border: 0;
}

  

注意：您应该在主css之前为bootstrap css添加链接href，   所以bootstrap不会覆盖你的风格。

Answer 5

尝试使用!important中的css。

a {
  outline:none !important;
}
// it is `very important` that there is `no` `outline` for the `anchor` tag.  Thanks!

Answer 6

下面简单的尝试代码 -

{{1}}

如果开心欢呼！ 美好的一天

Answer 7

删除outline会损害网站的可访问性。因此，我将其保留在那里，但使其不可见。

a {
   outline: transparent;
}

Answer 8

在我的情况下，这是一个按钮，显然带有按钮，这只是Firefox中的问题。找到解决方案here：

button::-moz-focus-inner {
  border: 0;
}