（CSS？）如何消除浏览器在超链接图像周围显示的“选中”线？

Question

（CSS？）如何消除浏览器在超链接图像周围显示的“选中”线？

12

这张截图来自于OS X/Firefox 3系统。请注意，中间的选项卡（一张图片）周围有一条虚线框，显然是因为它是最近被选中的选项卡。在CSS或JavaScript中是否有方法可以消除这个虚线框呢？（嗯...免费的图片托管服务已经缩小了图片的尺寸。但如果你能看到它，你会注意到方块周围有一个虚线的选择区域。）

屏幕截图 http://www.freeimagehosting.net/uploads/th.fadf78173b.png

- Doug Kaye

1

图片似乎已经消失了。 - shashwat

5个回答

4

在您的onclick事件中，使用this.blur()或者具体地将焦点设置到其他地方。

- BoltBait

你们太快了，真是太感谢BoltBait和Geoff。 - Doug Kaye

这是第一个不错的答案，但我转而使用davebug的CSS解决方案。 - Doug Kaye

1

请注意（正如肯特在下面提到的那样），您可能会降低使用 Tab 键导航您网站的人的可用性。 - BoltBait

是的（我之前就提到过这一点），我认为应该编辑davebug的答案以反映这一点。 - Bobby Jack

我也喜欢这个解决方案，因为它考虑了键盘导航的评论，比起CSS更好。 - dfrankow

1

首先，试试这个

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

然而，这会降低可用性。

您需要有选择地应用相关的替代效果，以便像那些主要使用TAB键导航的人了解当前焦点在哪里。

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

- Kent Fredric

0

你可以从查看:focus和:active伪类开始，尽管在这些情况下，你可能不应该完全删除任何格式，因为它们是极其有价值的可用性辅助功能。

- Bobby Jack

0

使用

*:focus {outline:0px;}

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

- AshAndrien

选择元素怎么样？ - challet

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- davebug · Accepted Answer

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

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

（假设你的选项卡是使用a元素完成的。）

【编辑】应所有其他人的要求，对于未来的观众，应注意轮廓对于键盘导航者非常重要，因为它指定了您的选择位置，并因此提示您的下一个“选项卡”可能去哪里。因此，不建议删除这个虚线框选。但是，如果您认为有必要，仍然有用知道如何取消它。

并且如评论中所述，如果您只处理FF> v1.5，请随意省略-moz-outline-style：none;。