无论如何,要在快速点击时阻止Chrome中的元素蓝色突出显示？

Question

大多数时候我并不担心它,但我有一个图像轮播,如果我快速点击下一个和上一个div,它们将在Chrome中突出显示.

我尝试使用outline:none但没有效果.那里有解决方案吗？

Answer 1

对于Android上的Chrome,我使用了-webkit-tap-highlight-color CSS属性:

-webkit-tap-highlight-color: transparent;

Answer 2

除了Floremin提供的链接,它使用JavaScript清除文本选择以"清除"选择,您还可以使用纯CSS来完成此操作.CSS就在这里......

.noSelect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

只需将class="noSelect"属性添加到要应用此类的元素即可.我强烈建议尝试使用这个CSS解决方案.使用JavaScript没有任何问题,我只相信这可能会更容易,并在代码中清理一点.

对于Android -webkit-tap-highlight-color: transparent;上的chrome是一个额外的规则,您可能需要尝试在Android中获得支持.

Answer 3

我正在运行Chrome版本60,之前的CSS答案都没有.

我发现Chrome正在通过这种outline风格添加蓝色突出显示.添加以下CSS为我修复了它:

:focus {
    outline: none !important;
}

Answer 4

但是,有时,即使使用user-select和touch-callout关闭,cursor: pointer;也可能会产生这种效果,所以,只需设置cursor: default;它就可以了.

Answer 5

要移除手机上的蓝色覆盖，您可以使用以下方法之一：

-webkit-tap-highlight-color: transparent; /* transparent with keyword */
-webkit-tap-highlight-color: rgba(0,0,0,0); /* transparent with rgba */
-webkit-tap-highlight-color: hsla(0,0,0,0); /* transparent with hsla */
-webkit-tap-highlight-color: #00000000; /* transparent with hex with alpha */
-webkit-tap-highlight-color: #0000; /* transparent with short hex with alpha */

但是，与其他属性不同，您不能使用

-webkit-tap-highlight-color: none; /* none keyword */

在 DevTools 中，这将显示为“无效的属性值”或其他内容。

要在聚焦时移除蓝色/黑色/橙色轮廓，请使用：

:focus {
    outline: none; /* no outline - for most browsers */
    box-shadow: none; /* no box shadow - for some browsers or if you are using Bootstrap */
}

我删除 的原因box-shadow是因为 Bootsrap（和一些浏览器）有时会将它添加到焦点元素中，因此您可以使用它来删除它。

但是如果有人使用键盘导航，他们确实会感到非常困惑，因为他们依靠这个大纲来导航。所以你可以替换它

:focus {
    outline: 100px dotted #f0f; /* 100px dotted pink outline */
}

您可以使用或定位移动设备上的点击，因此您可以使用它们来提供帮助。或者它可能会变得混乱。:hover:active

完整代码：

element {
    -webkit-tap-highlight-color: transparent; /* remove tap highlight */
}
element:focus {
    outline: none; /* remove outline */
    box-shadow: none; /* remove box shadow */
}

其他信息：

• 如果您想自定义，-webkit-tap-highlight-color则应将其设置为半透明颜色，以便点击时下方的元素不会被隐藏
• 请不要从重点元素中删除轮廓，或为它们添加更多样式。
• -webkit-tap-highlight-color没有得到很好的浏览器支持，也不是标准的。您仍然可以使用它，但要小心！