如何删除链接点击时的轮廓？

Question

当我单击网站上的链接时，它会在链接周围创建一个轮廓，如下所示

我尝试添加：

a.image-link:focus { outline: 0; }

和

a {outline : none;}

但似乎没有什么可以摆脱它。有办法去掉吗

Answer 1

你可以使用这个：

a:active, a:focus {
  outline: 0;
  border: none;
  -moz-outline-style: none;
}

Answer 2

如果上述解决方案中至少一种对任何人都不起作用。也试试这个吧

a:active, a:focus {
 box-shadow: none;
}

Answer 3

只需在样式文件中添加

a:visited { outline: none; }

即可。

Answer 4

尝试所有这些，直到找到适合您情况的方法。

a:active, a:focus, li:focus, li:active {
    outline: none !important;
    border: none !important;        
    text-decoration: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-user-select: none; /* Chrome/Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
    user-select: none;
}

Answer 5

只需添加 大纲：无； 文字装饰：无；

Answer 6

已修复：

在我的 CSS 中发现已经生成了在

a:active

上创建轮廓的代码。这是覆盖我的代码并删除它解决了问题。

Answer 7

为我工作

我为此奋斗了一段时间，这对我在带有 StoreFront 主题的 WordPress 5.5.3 上有效：

a:hover,
a:active {
    outline: none;
    box-shadow: none !important;
}

Answer 8

为我工作

a:focus-visible {
  outline: none;
}

Answer 9

您可以使用 a，a：活动，a：焦点{大纲：无;}