CSS Firefox - 如何停用虚线边框（firefox 点击指示器）？

Posted 2023-02-21

【中文标题】CSS Firefox - 如何停用虚线边框（firefox 点击指示器）？

【英文标题】：CSS Firefox - How to deactivate the dotted border ( firefox click indicator )?

【发布时间】：2011-05-16 05:14:15

【问题描述】：

这个点击指示器对于我最近的网络项目来说是一个恶心的部分。我讨厌这个！ - 如何对我的 Firefox 浏览器说他不应该标记被点击的对象？

【问题讨论】：

在不提供某种 :focus 或 :active 视觉指示的情况下完全删除轮廓会在您的可访问性中设置障碍。那些使用键盘导航您的网站的用户依靠这些轮廓来指示他们已使用选项卡标记到哪个元素。您可以设置它们的样式，但我不会完全删除它们。

clrux 上面的评论已失效。有时最好将焦点指示器添加到子元素以获得更好的颜色对比度和视觉可访问性。希望这是人们在这里尝试实施的那种东西。只是删除焦点指示器，这是一个很大的禁忌。

【参考方案1】：

如果您的菜单项不是输入元素（例如按钮），您可以使用 CSS 将其隐藏，如下所示：

element  outline: none; 

【参考方案2】：

一个 大纲：无；

【讨论】：

在我的情况下，我必须在其中添加 !important 才能让它坚持下去。

【参考方案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;

【讨论】：

这是一个移动的目标。您还需要添加 border: none !important; 才能使其现在正常工作。烦人。

【参考方案4】：

这样更准确：

a  outline: none!important; 

【参考方案5】：

为了更具体地针对@ioannis-karadimas，您可以在悬停时删除轮廓（假设鼠标输入）但将其保留为焦点（假设键盘输入）。这将保留大部分可访问性。话虽这么说：

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

【参考方案6】：

基于this post，添加outline:0 也可以解决问题。

.selector outline:0; 

如果您不想让网站中的任何元素显示边框，请尝试以下操作，

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

【参考方案7】：

您可能会讨厌它，但您的客户可能不会。一般来说，覆盖浏览器功能是迷惑用户并激励他们不要访问您的网站的好方法。

【讨论】：

是的，我同意。一致的用户体验是一个好的网站的最佳选择。但有些网站需要打破这些可用性规则。

好吧，在给定的上下文中，我看不出明显的理由（来自屏幕截图）。

【参考方案8】：

疯狂的解决方案：

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

但我不喜欢它。

当我单击 Firefox 12.0 时，它确实在输入类型 =“按钮”上标记了一个点。 outline:none 对 :active, :focus, ... 没有任何作用