css - （CSS？）消除浏览器在超链接图像周围的“选定”行？

Question

随附的屏幕截图来自 OS X/Firefox 3。请注意，中心选项卡（图像）周围有一条虚线，显然是因为它是最近选择的选项卡。有没有办法可以消除 CSS 或 JavaScript 中的这条虚线？（嗯……免费的图像托管服务已经减小了图像的大小。但是如果你能看到它，你会注意到块周围有一个虚线选择区域。）

score 21 · Accepted Answer

您需要将以下行添加到您的 css 中：

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

（当然，假设您的选项卡是使用 a 元素完成的。）

[编辑] 应其他人的要求，对于未来的观众来说，应该注意大纲对于键盘导航器来说是必不可少的，因为它指定了您的选择在哪里，因此，提示您的下一个“标签”可能会去哪里. 因此，不建议删除此虚线选择。但是，如果您认为有必要，了解您将如何做仍然很有用。

正如评论中提到的，如果您只处理 FF > v1.5，请随时省略 -moz-outline-style:none;

score 4 · Accepted Answer

4

在您的 onclick 事件中， this.blur()

或者，专门将焦点放在其他地方。

于 2008-10-06T23:40:20.113 回答

score 1 · Accepted Answer

对于初学者，试试这个

*,*:hover,*:focus,*:active { outline: 0px none; }

然而，这会降低可用性。

您将希望在相关的地方选择性地应用替代效果，以使人们（例如主要使用 TAB 键导航的人）了解当前关注的内容。

div.foo:active, 
div.foo:focus, 
div.foo:hover
{  
  /* Alternative Style */
}

score 0 · Accepted Answer

您可以从查看 :focus 和 :active 伪类开始，尽管您可能不应该从这些案例中完全删除任何格式，因为它们是非常宝贵的可用性帮助。

score 0 · Accepted Answer

使用

*:focus {outline:0px;}

使用鼠标选择时，将删除输入和文本区域的样式。如果您选择删除 :focus 上的所有轮廓，请确保为这些表单项附加这些样式和边框。

5 回答 5