无论如何要防止快速单击时Chrome中元素的蓝色突出显示？

Question

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

我尝试使用大纲：无但没有效果。有什么解决办法吗？

Answer 1

您可以使用纯 CSS 来完成此操作。这是多浏览器支持的概要，第一行和最后一个 :focus 位覆盖了 chrome。详情如下。

.noSelect {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.noSelect:focus {
    outline: none !important;
}

只需将class="noSelect" 属性添加到您希望应用此类的元素。我强烈建议试试这个 CSS 解决方案。有人建议使用 JavaScript，但我相信这是最干净的解决方案。

适用于 Android/Safari 手机/Edge

-webkit-tap-highlight-color: transparent; 是您可能正在寻找的附加规则。影响 Chrome 桌面（尤其是触摸屏）和移动设备。 Here's a warning about using this non-standard property，以及some accessibility concerns with suggestions。最佳做法是用您自己的样式替换突出显示。

更新：Chrome 的更高版本...

对此答案的评论者指出，较新版本的 Chrome 需要 :focus { outline: none !important;}。答案也适用于包括这个！啊，不断变化的标准。

Answer 2

我和<input type="range" /> 有类似的问题，我解决了

-webkit-tap-highlight-color: 透明；

input[type="range"]{
  -webkit-tap-highlight-color: transparent;
}

 <input type="range" id="volume" name="demo"
         min="0" max="11">
  <label for="volume">Demo</label>

Answer 3

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

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

但是，unlike other properties，你不能用

-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 target taps on mobile，因此您可以使用它们来提供帮助。否则可能会令人困惑。

---

完整代码：

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，则应将其设置为半透明颜色，以便在点击时不会隐藏下方的元素
• 请从焦点元素don't remove the outline，或为它们添加更多样式。
• -webkit-tap-highlight-color 没有得到很好的浏览器支持并且不是标准的。您仍然可以使用它，但要小心！

Answer 4

对于 Android 上的 Chrome，您可以使用 -webkit-tap-highlight-color CSS property：

-webkit-tap-highlight-color 是一个非标准的 CSS 属性，用于设置 出现在链接上的突出显示的颜色 轻拍。突出显示向用户表明他们的点击正在 成功识别，并指示他们正在点击哪个元素 开。

要完全去除高亮，可以将值设置为transparent：

-webkit-tap-highlight-color: transparent;

请注意，这可能会对可访问性产生影响：请参阅 outlinenone.com