聚焦小图像时发生奇怪的轮廓

Question

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

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

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

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

Answer 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。

Answer 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/