CSS Firefox - 如何取消点状边框（Firefox点击指示器）？

Question

这个点击指示器对我最近的网络项目来说很烦人... 我讨厌它！- 我该如何告诉我的Firefox浏览器不要标记已点击的对象？

- Tomkay

---

完全删除轮廓而不提供某种:focus或:active视觉指示会对您的可访问性造成障碍。那些使用键盘浏览您的网站的用户依赖于这些轮廓来指示他们所选中的元素。您可以为其设置样式，但不建议完全删除它们。 - zxbEPREF

clrux 上面的评论非常准确。有时为了更好的颜色对比度和视觉可访问性，最好在子元素上添加焦点指示器。希望人们在这里尝试实现这种东西。仅仅删除焦点指示器是绝对不可以的。 - cage rattler

Answer 1

假如你的菜单项不是表单元素（比如按钮），你可以使用CSS来隐藏它，如下所示：

element { outline: none; }

- Ioannis Karadimas

Answer 2

a { 取消轮廓线: 无; }

- benhowdle89

---

在我的情况下，我不得不添加 !important 才能使其生效。 - George Mauer

Answer 3

在 Firefox 20.1 中，没有任何帮助，直到这个方法：

a:focus, a:active,
button,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    outline: none !important;
}

- MythThrazz

---

这是一个不断变化的目标。现在你需要添加border: none !important;才能使其正常工作。真烦人。 - cage rattler

Answer 4

这更加准确：

a { outline: none!important; }

- Rachid O

Answer 5

基于这篇文章，添加outline:0也可以解决问题。

.selector{ outline:0; }

如果您不想在网站中显示任何元素的边框，请尝试以下方法：

:focus { outline:none; }
::-moz-focus-inner { border:0; }

- Lucky

Answer 6

更具体地说，针对@ioannis-karadimas的问题，您可以在鼠标悬停时取消轮廓线（假设使用鼠标输入），但保留聚焦时的轮廓线（假设使用键盘输入）。这将保留大多数可访问性。话虽如此：

element:hover { outline: none; }
element:focus { // leave the focus }

- zxbEPREF

Answer 7

你可能不喜欢它，但你的客户可能不会这样。一般来说，覆盖浏览器功能是让用户感到困惑并且不愿意访问你的网站的好方法。

- Rushyo

---

是的，我同意。对于一个好的网站来说，一致的用户体验是关键，但有些网站需要打破这些可用性规则。 - Tomkay

在给定的上下文中，我看不出明显的理由（从屏幕截图中）。 - Rushyo

Answer 8

疯狂的解决方案：

input[type="button"]::-moz-focus-inner{
    border: 1px dotted transparent;
}

但我不喜欢它。

事实上，Firefox 12.0 在我点击 input type="button" 时会在其上标记一个点。 outline:none 对于 :active, :focus, ... 没有任何作用。

- Junior Mayhé