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

114

我发现如果有一个 a不链接到新页面的链接，那么当用户单击它时，该元素周围会出现一条虚线，仅当用户单击该页面中的其他任何内容时，它才会消失，如何删除这个？

例：

在此处输入图片说明

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

html css

— hguser
source

如何维护用于通过元素制表的大纲，但是单击该大纲时将其删除？

— 哥斯达黎加

198

使用outline:none到锚标记类

— 索米亚
source

谢谢，但是它对我不起作用，我以前创建了很多链接，直到现在我都没有遇到过这个问题。但是现在我很困惑，那么以前提出的原因是什么？

— 杜尔加饶

17

请注意，这将损害您的网站的可访问性。

— mike23

3

@Durgaprasad看到马克斯回答。您还需要将其应用于a:active, a:focus。

— 奥德斯2014年

我同意w / mike23。我尝试达成妥协的方法是，在单击事件（或者可能是mouseup会更好吗？）上，删除该链接的轮廓（同时还要在删除之前将所有链接重置为具有轮廓。） ...否则，事情会因未概述而累积卡住）。这会暂时从最后单击的元素中删除该轮廓，同时将其保留在其他元素上，因此您仍然可以知道正在浏览的内容。

— Max Starkenburg

1

@cpu_meltdown试试input:focus{outline: none}

— Sowmya

55

就像@Lo Juego所说的那样，阅读文章

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

— 标记
source

12

a {
    outline: 0;
  }

但是在更改之前请先阅读以下内容：

删除虚线轮廓

— 罗觉go
source

8

尝试!important在css。

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

— 阿卡什
source

7

删除所有喜欢的轮廓，包括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之前添加引导CSS的链接href，因此引导不会覆盖您的样式。

— 老火车
source

3

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

a {
   outline: transparent;
}

— 昌克鲁兹
source

1

将轮廓设置为透明仍然会损害您的网站的可访问性。这个想法是，它提供了一个可视化的指示器，指示元素已聚焦。如果使其不可见，则该指示符将丢失。更多信息在这里：outlinenone.com

— ktbee

1

就我而言，它是一个按钮，显然带有按钮，这在Firefox中只是一个问题。解决方案在这里找到：

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

— 安德鲁
source

0

它简单地尝试下面的代码-

a{
outline: medium none !important;
}

如果开心的加油！美好的一天

— 洛伊拉
source