Css 在快速点击时，如何防止Chrome中元素的蓝色高亮显示？

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

---

我试着使用大纲：没有，但没有效果。有什么解决方案吗？

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

看看这个：

这是清除选择的一个示例。您只需将其修改为只处理所需的特定元素。

除了使用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上的chrome

---

-webkit点击突出显示颜色：透明

是一个额外的规则，您可能希望尝试在Android中提供支持

对于Android上的Chrome，您可以使用：

-webkit tap highlight color是一个非标准CSS属性，用于设置 链接运行时显示在链接上的高光颜色 轻敲。高亮显示向用户指示他们的点击正在进行 已成功识别，并指示正在点击的元素 开

要完全删除突出显示，可以将该值设置为透明：

---

-webkit点击突出显示颜色：透明；

---

请注意，这可能会对可访问性产生影响：请参见，但有时，即使禁用了

用户选择
和
触摸标注
，光标：指针
可能会导致这种效果，所以只需设置
光标：默认值，它会工作。
我运行的是Chrome 60版，以前的CSS答案都不起作用

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

:focus {
    outline: none !important;
}

这对我来说最合适：

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

要删除手机上的蓝色覆盖，可以使用以下选项之一：

-webkit点击突出显示颜色：透明；/*使用关键字透明*/
-webkit点击高亮颜色：rgba（0,0,0,0）；/*使用rgba透明*/
-webkit点击突出显示颜色：hsla（0,0,0,0）；/*透明带hsla*/
-webkit点击突出显示颜色：#00000000；/*带alpha的十六进制透明*/
-webkit点击突出显示颜色：#0000；/*透明，带有带alpha的短十六进制*/

但是，您不能使用

-webkit点击突出显示颜色：无；/*无关键字*/

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


要在聚焦时删除蓝色/黑色/橙色轮廓，请使用以下命令：

：焦点{
大纲：无；/*无大纲-适用于大多数浏览器*/
框阴影：无；/*无框阴影-适用于某些浏览器或使用引导*/
}

我之所以删除
框阴影
，是因为Bootsrap（和一些浏览器）有时会将其添加到聚焦元素中，因此您可以使用此选项删除它

但如果有人用键盘导航，他们会非常困惑，因为他们依靠这个轮廓来导航。所以你可以替换它

：焦点{
轮廓：100px点#f0f；/*100px点粉色轮廓*/
}


您可以使用
：hover
或
：active
，因此您可能会使用它们来提供帮助。或者会让人困惑


完整代码：

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


其他资料：


如果要自定义
-webkit点击突出显示颜色
，则应将其设置为半透明颜色，以便点击时不会隐藏下面的元素
请选择重点元素，或为其添加更多样式
-webkit tap highlight color
没有很好的浏览器支持，也不是标准。你仍然可以使用它，但要小心
我和
有类似的问题，我用

-webkit点击突出显示颜色：透明


input[type=“range”]{
-webkit点击突出显示颜色：透明；
}

演示
所以CSS无法修复它，是吗？我可以在单击处理程序中清除所选文本吗？编辑-谢谢你的例子。这很糟糕，它必须通过javascript来处理。我希望这只是一个CSS问题。另外，这会对可访问性产生任何影响吗？你可以清除点击处理程序中的文本，但看看纯CSS的@smts answer。仅对于Chrome，您可能只需要
user select
和
webkit user select
。这是我要使用的解决方案，因为我在Chrome中只遇到突出显示问题，而且效果很好。感谢所有参与的人！无法在Android上使用Chrome。我必须使用
-webkit点击高亮颜色：rgba（255，255，255，0）
-webkit点击突出显示颜色：透明
是ChromeFor android上的chrome的关键部分-webkit点击突出显示颜色：透明；-为我工作谢谢！例如，我发现当你在触摸屏上运行时，Chrome的表现将与Android上的非常相似。我有一个按钮，当你点击它里面的某个地方时，它会闪烁蓝色。只有当我使用这个答案时，它才停止。谢谢其他css atty都不会这样做。如此重要，因为点击突出显示会扭曲所点击内容的外观，模糊您的视觉语言。
-webkit点击突出显示颜色：透明
似乎也很管用。我喜欢这个，对于触摸活动来说这是必须的！此信息具有“表外”有用性！非常有用。我尝试了很多不同的方法，但效果很好。这是一个c