无论如何要防止蓝色高亮的元素在 Chrome 浏览器快速点击？

大多数时候我并不担心这个问题，但是我有一个图像传送带，如果我快速点击下一个和上一个 div，它们将在 Chrome 中被高亮显示。

我试着用大纲: 没有效果，没有效果。有什么解决办法吗？

152983 次浏览
小开

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

看看这个:

使用 JavaScript 清除文本选择

这是一个清除选择的例子。您只需要对其进行修改，以便只在您需要的特定元素上工作。

小开
最佳答案

您可以使用纯 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 桌面(尤其是。触摸屏)和移动设备。下面是关于使用此非标准属性的警告和 与建议有关的一些可访问性问题。最佳实践是用您自己的样式替换高光。

更新: 最新版本的 Chrome..。

有评论指出，新版本的 Chrome 需要 :focus { outline: none !important;}。答案适合包括这一点，以及！啊，不断变化的标准。

小开

对于 Android 上的 Chrome 浏览器，你可以使用 - webkit-点击-突出显示-彩色 CSS 属性:

- 是一个非标准的 CSS 属性，用于设置 出现在链接上的突出显示的颜色 高亮显示向用户指示他们的点击正在被 成功识别，并指出他们敲击的元素 开始。

为了完全消除高亮显示，您可以将值设置为 transparent:

-webkit-tap-highlight-color: transparent;

请注意，这可能会对可访问性产生影响: 请参见 Outlinenone.com

小开

但是，有时候，即使关闭了 user-select和 touch-callout，cursor: pointer;也可能引起这种效应，所以，只要设置 cursor: default;就可以了。

小开

我正在运行 Chrome 60版本，之前的 CSS 回答都不起作用。

我发现 Chrome 通过 outline风格添加了蓝色高光。添加以下 CSS 为我修复了这个问题:

:focus {
outline: none !important;
}
小开

这对我最有效:

.noSelect:hover {
background-color: white;
}
小开

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

-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没有得到很好的浏览器支持，也不是标准的。你仍然可以使用它，但是要小心！
小开

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

- 网络工具包-点击-突出显示-颜色: 透明;

input[type="range"]{
-webkit-tap-highlight-color: transparent;
}
 <input type="range" id="volume" name="demo"
min="0" max="11">
<label for="volume">Demo</label>


提交答案