从 Chrome 中的图像中删除蓝色边框

Question

我搜索了整个网络并尝试了所有发布的补救措施，但均无济于事；无论如何，大多数答案都不适合我的情况。

守则：

<form method = "post" action = "index.php">
    <input type = image alt = Submit alt = "" id = "zy" src = "Images/Button_Close_1.png" onmouseover = "this.style.cursor = 'hand';
     SetImage('zy','Images/Button_Close_2.png');
     return false;"  onmouseout = "SetImage('zy','Images/Button_Close_1.png');
     return false;" border = "0" height = "37" width = "183" />
</form>

SetImage 是一个 javascript 函数，它获取第一张图像并将其替换为第二张图像，从而为您提供自定义的“悬停”按钮。

使用 CSS 可能有更简单的方法，但我已经使用这段代码有一段时间了。

问题： 在最新版本的 Chrome（谢谢，Google）中，当您单击这些图像时，它们周围都有一个难看的蓝色边框。我似乎无法摆脱它！

我的表单需要自定义图像，但我真的很想摆脱这条线。有什么想法吗？

Answer 1

作为Remove blue border from open element 中的 NKL 建议：

在你的 CSS 中尝试outline: none

例子：

image{
    outline:none;
}

蓝色边框可能看起来很难看，但在页面上仍然可以很好地帮助 TAB 导航并为残疾人提供更好的方向。

Answer 2

要从所有输入、按钮和图像中删除它：

input:focus, textarea:focus, select:focus, button:focus, img:focus {
    outline: none;
}

Answer 3

此线程中的两个解决方案与可访问性最佳实践相冲突。

在这里查看一些很棒的建议：https://www.a11yproject.com/posts/2013-01-25-never-remove-css-outlines/

TL;DR：轮廓旨在显示键盘焦点，并且应该始终存在某种形式的视觉指示器。