聚焦小图像时出现奇怪的轮廓答案

【问题标题】：Strange outline happening when focusing small images聚焦小图像时出现奇怪的轮廓
【发布时间】：2015-03-18 22:20:05
【问题描述】：

我使用 jquery 以编程方式聚焦的某些小图像周围出现了奇怪的轮廓。我该如何解决这个问题？

我需要一个边框，因为我有一个 :focus 类，它定义了我想要轮廓的颜色。但是，当我删除边框并将1px solid #2b5367; 添加到轮廓时，或者删除轮廓并将边框设置为1px solid #2b5367; 我得到这个：

这也不是我想要的。我希望第一张图片的外边框出现，但内边框不存在。

这里是小提琴：http://jsfiddle.net/u1enqp1e/

【问题讨论】：

你在 Firefox 上测试这个吗？
不知道是否有更多信息。在我看来，浏览器继承了 CSS 属性。可能如果你给你的元素类似 .classHere:focus {outline:0; border:0;} 会解决的
我在 chrome 中测试了这个。我会添加你的修复，@AlvaroMenéndez 并报告。
我更新了我原来的帖子，@AlvaroMenéndez
这里时间不早了，该睡觉了。明天早上我会检查一下，看看我是否可以帮助你。我可能会发现这个问题已经回答了，但我还是会检查以防万一。

标签： jquery css focus

【解决方案1】：

正如 alvarado 提到的，尝试将其添加到您的 css：

.classHere:focus {
    outline:0;
    border:0;
    box-shadow: none !important;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

但您可能已经注意到，我也添加了 box-shadow 以及 outline 和 border。

如果 css 位于其他 css 文件下方，您可以删除 !important。

【讨论】：

不过，我想在元素获得焦点时编辑边框轮廓的颜色。
哦，那么您可以从上面排除 outline: 0 并将其替换为您的自定义属性。
你能提供一个你现在拥有的东西的 jsfiddle 以便更容易找到负责额外大纲的属性
这是一个 jsfiddle。如您所见，有两个轮廓。 jsfiddle.net/u1enqp1e
是因为我的图片有链接吗？

【解决方案2】：

显然，如果您首先将焦点项目的轮廓设置为 0，那么您就可以使用类似的方法覆盖轮廓颜色。

*:focus {
    outline: none;
}

a:focus img {
    border: 1px solid #2b5367;
    box-shadow: 0px 0px 3px 1px rgba(131, 190, 223, 1);
    border-radius: 3px;
}

这是一个有效的小提琴：http://jsfiddle.net/wv83g8r5/

【讨论】：