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的最新版本（谢谢你，谷歌）中，当你点击它们时，这些图像周围都有一个丑陋的蓝色边框。我似乎无法摆脱它！

我的表格需要我的自定义图像，但我真的想摆脱这一行。有什么想法吗？

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：该轮廓用于显示键盘焦点，并且某些形式的视觉指示器应始终存在。

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

3 个答案: