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

Posted 2023-03-06

【中文标题】如何删除html中单击的元素周围的虚线

【英文标题】：how to remove the dotted line around the clicked a element in html

【发布时间】：2012-10-23 02:28:41

【问题描述】：

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

例子：

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

【问题讨论】：

如何保持在元素间切换的轮廓，但在单击时将其删除？

【参考方案1】：

使用outline:none 锚定标签类

【讨论】：

谢谢，但它对我不起作用，我之前创建了这么多链接，直到现在我才遇到这个问题。但是现在我很困惑，所以之前的原因是什么？

请注意，这会损害您网站的accessibility。

@Durgaprasad 见 Marks 的回答。您还需要将其应用于a:active, a:focus。

我同意 mike23。我达成妥协的尝试是，在点击事件上（或者也许 mouseup 会更好？），删除该链接的大纲（同时也将任何和所有链接重置为在所述删除之前有一个大纲.. . 否则事情会累积地被卡住而没有被勾勒出来）。这会暂时从最后一次单击的元素中移除轮廓，同时将其保留在其他元素上，因此您仍然可以知道您正在浏览的内容。

@cpu_meltdown 试试input:focusoutline: none

【参考方案2】：

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

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

【参考方案3】：

a 
    outline: 0;
  

但在更改之前请阅读此内容：

removing-the-dotted-outline

【参考方案4】：

在css 中尝试使用!important。

a 
  outline:none !important;

// it is `very important` that there is `no` `outline` for the `anchor` tag.  Thanks!

【参考方案5】：

删除所有带点的轮廓，包括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， 所以 bootstrap 不会覆盖你的风格。

【参考方案6】：

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

a 
   outline: transparent;

【讨论】：

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

【参考方案7】：

在我的例子中，它是一个按钮，显然，对于按钮，这只是 Firefox 中的一个问题。找到解决方案here:

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

【参考方案8】：

下面的代码很简单--

a
outline: medium none !important;

如果开心干杯！ 美好的一天