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

Posted 2023-03-06

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

【英文标题】：Anyway to prevent the Blue highlighting of elements in Chrome when clicking quickly?

【发布时间】：2014-01-27 00:27:16

【问题描述】：

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

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

【问题讨论】：

我在当前的 Chrome 版本上看不到这个效果

我知道你的用例是不同的，但对于其他可能想从所有链接中删除它的人，我不建议这样做。我曾尝试在 PWA 上将其删除，但如果没有视觉反馈，用户会认为应用程序速度较慢。

【参考方案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;。答案也适用于包括这个！啊，不断变化的标准。

【讨论】：

仅对于 Chrome，您可能只需要 user-select 和 webkit-user-select。

这是我要采用的解决方案，因为我在 Chrome 中只有突出显示的问题，而且效果很好。感谢所有参与的人！

无法在 android 上使用 Chrome。我不得不使用-webkit-tap-highlight-color: rgba(255, 255, 255, 0);

-webkit-tap-highlight-color: transparent; 是 Chrome 的关键部分

对于 chrome 在 android -webkit-tap-highlight-color: 透明； - 为我工作，谢谢！

【参考方案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>

【参考方案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 没有得到很好的浏览器支持并且不是标准的。您仍然可以使用它，但要小心！

【参考方案4】：

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

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

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

-webkit-tap-highlight-color: transparent;

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

【讨论】：

我发现，例如，当您在触摸屏上运行时，Chrome 的行为与在 Android 上的行为非常相似。我有一个 ，只要你点击它里面的某个地方，它就会闪烁蓝色。只有当我使用这个答案时它才停止。谢谢！

其他 css attys 都不会这样做。如此重要，因为点击突出显示会扭曲所点击内容的外观，从而模糊您的视觉语言。

-webkit-tap-highlight-color: transparent; 似乎也可以。

我喜欢这个，对于触摸事件，这是必须的！此信息具有“超出图表”的用处！

非常有用。我尝试了很多不同的方法，但效果很好。

【参考方案5】：

这对我来说效果最好：

.noSelect:hover 
  background-color: white;

【讨论】：

这很糟糕，是通往未来地狱的道路。没有冒犯。

网站背景不是白色怎么办？

这是不可维护的。请不要这样做。

【参考方案6】：

我运行的是 Chrome 60 版，以前的 CSS 答案都不起作用。

我发现 Chrome 正在通过 outline 样式添加蓝色突出显示。添加以下 CSS 为我修复了它：

:focus 
    outline: none !important;

【讨论】：

您，先生，是救生员。

这是适用于 Android 上的 Chrome（版本 61）的工作

适用于最新版本的 Chrome。谢谢！

超级，想知道为什么我信任的user-select:none 无处可去

我尝试了所有方法，但这就像魅力一样。谢谢你救了我的头发！

【参考方案7】：

但是，有时，即使 user-select 和 touch-callout 关闭，cursor: pointer; 也可能会导致此效果，因此，只需设置 cursor: default; 即可。

【讨论】：

这是一个正确答案，cursor: pointer; 确实引起了亮点。但是-webkit-tap-highlight-color: transparent; 是更通用的解决方案。

@yanot：在将其标记为相对通用解决方案之前，请阅读有关-webkit-tap-highlight-color的警告：developer.mozilla.org/en-US/docs/Web/CSS/…

@HassanBaig 我想很明显我不是指通用跨浏览器，而是在这种情况下，即跨不同版本的chrome

谢谢 - 没有其他解决方案适合我。必须删除光标指针才能使蓝色突出显示消失

cursor: default 在没有其他方法的情况下为我解决了问题。

【参考方案8】：

尝试为这些元素上的选择事件创建一个处理程序，并在处理程序中清除选择。

看看这个：

Clear Text Selection with JavaScript

这是一个清除选择的例子。您只需将其修改为仅适用于您需要的特定元素。

【讨论】：

所以不能用 CSS 来修复吧？我可以清除点击处理程序中的选定文本吗？编辑-感谢您的示例。这很糟糕，它必须通过javascript处理。我希望这只是一个 CSS 问题。

另外，这会对可访问性产生影响吗？

您可以清除点击处理程序中的文本，但请使用纯 CSS 查看@smts 答案。

这就是我要找的。谢谢！