点击后 div 周围出现恼人的蓝色突出显示答案

【问题标题】：Annoying Blue Highlighting around div after click点击后 div 周围出现恼人的蓝色突出显示
【发布时间】：2014-08-19 21:24:10
【问题描述】：

当我单击选项卡按钮时，我在 div 周围出现了这个恼人的蓝色突出显示...我在其他论坛上读到我应该将以下内容添加到有此问题的 div 中，但它不起作用。

            .noSelect {
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -o-user-select: none;
                user-select: none;
            }

您可以在此处仔细查看http://omarhabash.com/nova/?page_id=28

【问题讨论】：

请不要链接到可以更改的外部资源。它破坏了你的问题对其他人的价值。见：meta.stackoverflow.com/questions/125997/…
@Diodeus 好吧，在这种情况下，他包含了一张图片和一些代码，然后为了额外的参考，他添加了链接。因此，它比仅包含链接要好得多。

标签： html css

【解决方案1】：

将此添加到您的 css 文件中！

.btn-group-justified > .btn-group .btn {
    width: 100%;
    outline: none;
}

更新： 每次都使用它来避免此类问题。

*:focus {
outline: 0;
outline: none;
}

【讨论】：

【解决方案2】：

使用这个类：

.noSelect {
    -webkit-tap-highlight-color:transparent;
    -moz-tap-highlight-color:transparent;
    -o-tap-highlight-color:transparent;
    tap-highlight-color:transparent;
}

【讨论】：

请解释一下你的答案
感谢您提供此代码 sn-p，它可能会提供一些有限的即时帮助。 proper explanation would greatly improve its long-term value 通过展示为什么这是一个很好的解决问题的方法，并将使其对未来有其他类似问题的读者更有用。请edit您的回答添加一些解释，包括您所做的假设。

【解决方案3】：

这似乎是大纲。这是可访问性的默认浏览器功能。您可以使用outline 属性更改样式。

类似这样的例子：

.class {
    outline:none;
}

一些资源：

演示：

按 Tab，当您在链接上 Tab 时，您将看到大纲。

http://jsfiddle.net/gzmnbfem/

大纲移除演示：

按 Tab，您将看不到轮廓。但是，这不是推荐的方法，因为它会破坏可访问性。

http://jsfiddle.net/gzmnbfem/1/

【讨论】：