如何在Google Chrome中点击图像后去除图像周围的边框？

Question

实际上我正在使用SpryTabs插件来导航菜单。我为激活和取消选项卡使用了两个背景图像。当鼠标悬停在选项卡上时，我会激活该选项卡。这意味着选项卡会被突出显示，并在单击其他选项卡时取消选择的选项卡。

到目前为止一切都好。但是当用户在悬停后单击选项卡时，图像周围会显示边框。

这在Firefox中不会发生，只会在Chrome和IE中发生。

- PHPLover

Answer 1

您可以在CSS中为特定元素添加以下代码。

textarea:focus, input:focus{
    outline: none;
}

对于页面上的所有元素，请在您的css中使用此通用代码

*:focus {
    outline: none;
}

这对我很有帮助，因为当图像和输入框周围出现橙色边框时，这对我起了作用。

- PHPLover

---

虽然这些都是技术上正确的，但从可访问性的角度来看，删除它们通常是一个不好的主意。我不会在任何有大量受众的生产网站上这样做。或者你可以删除轮廓，但是要添加其他指示键盘焦点的方式。 - Brendan Heywood

@BrendanHeywood。根据您的观点，您是正确的，但是如果有任何要求移除这样的边框，而不考虑点击事件的感知，您可以使用此解决方案。就是这样。 - PHPLover

@BrendanHeywood Sergio建议使用outline: 1px solid transparent;。那会作为一个解决原问题并从可访问性角度良好工作的解决方案吗？ - ADTC

@BrendanHeywood 我想不是这样的，因为可访问性的重点是在元素周围显示可见边框。最好的方法是针对您想要删除轮廓的特定元素进行定位，而不是在整个页面上执行CSS重置。 - ADTC

Answer 2

在图片上尝试使用outline: none;

- Harsha Ivaturi

Answer 3

我曾经有同样的问题，以下样式可以解决问题：

outline: 1px solid transparent;

顺便提一下，对于某些原因，outline:none 在谷歌浏览器中没有作用。

- Sergio

---

很有趣想知道你为什么会遇到这个问题。只是想补充一下，我刚刚在一个实例上添加了outline:none（如果有影响的话，它是一个<button>）...然后它对我起作用了 :) - Joel Martinez

Answer 4

使用outline:none或outline:0

查看类似的内容在这里

- Sowmya