CSS 无论如何要防止快速单击时 Chrome 中元素的蓝色突出显示？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21003535/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Anyway to prevent the Blue highlighting of elements in Chrome when clicking quickly?
提问by Smith
Most of the time I'm not worried about it but I have an image carousel and if I click on the next and previous divs quickly, they will be highlighted in Chrome.
大多数时候我并不担心，但我有一个图像轮播，如果我快速点击下一个和上一个 div，它们将在 Chrome 中突出显示。
I tried using outline:none but no effect. Are there any solutions out there?
我尝试使用 outline:none 但没有效果。有什么解决方案吗？
回答by Iwazaru
For Chrome on Android, you can use the -webkit-tap-highlight-color CSS property:
对于 Android 上的 Chrome，您可以使用-webkit-tap-highlight-color CSS 属性：
-webkit-tap-highlight-color is a non-standard CSS property that sets the color of the highlight that appears over a link while it's being tapped. The highlighting indicates to the user that their tap is being successfully recognized, and indicates which element they're tapping on.
-webkit-tap-highlight-color 是一个非标准的 CSS 属性，它设置在链接被点击时出现在链接上的高亮颜色。突出显示向用户表明他们的点击已被成功识别，并指示他们正在点击的元素。
To remove the highlighting completely, you can set the value to transparent:
要完全删除突出显示，您可以将值设置为transparent：
-webkit-tap-highlight-color: transparent;
Be aware that this might have consequences on accessibility: see outlinenone.com
请注意，这可能会对可访问性产生影响：请参阅outlinenone.com
回答by smts
In addition to the link provided by Floremin, which clears text selection using JavaScript to "clear" the selection, you can also use pure CSS to accomplish this. The CSS is here...
除了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;
}
Simply add the class="noSelect"attribute to the element you wish to apply this class to. I would highly recommend giving this CSS solution a try. Nothing wrong with using the JavaScript, I just believe this could potentially be easier, and clean things up a little bit in your code.
只需将该class="noSelect"属性添加到您希望应用此类的元素即可。我强烈建议您尝试一下这个 CSS 解决方案。使用 JavaScript 并没有错，我只是相信这可能会更容易，并在您的代码中稍微清理一下。
For chrome on android-webkit-tap-highlight-color: transparent;is an additional rule you may want to experiment with for support in Android.
对于 android-webkit-tap-highlight-color: transparent;上的chrome是一个额外的规则，你可能想要尝试在 Android 中支持。
回答by Jeff L.
I'm running Chrome version 60 and none of the previous CSS answers worked.
我正在运行 Chrome 60 版，之前的 CSS 答案都不起作用。
I found that Chrome was adding the blue highlight via the outlinestyle. Adding the following CSS fixed it for me:
我发现 Chrome 正在通过outline样式添加蓝色突出显示。添加以下 CSS 为我修复了它：
:focus {
outline: none !important;
}
回答by Gustavo B.
But, sometimes, even with user-selectand touch-calloutturned off, cursor: pointer;may cause this effect, so, just set cursor: default;and it'll work.
但是，有时，即使关闭user-select和touch-callout关闭，cursor: pointer;也可能会导致这种效果，因此，只需设置cursor: default;即可。
回答by Floremin
Try creating a handler for select event on those elements and in the handler you can clear the selection.
尝试为这些元素上的 select 事件创建处理程序，在处理程序中您可以清除选择。
Take a look at this:
看看这个：
Clear Text Selection with JavaScript
It's an example of clearing the selection. You'd only need to modify it to work only on the specific element that you need.
这是清除选择的示例。您只需将其修改为仅适用于您需要的特定元素。
回答by nagy.zsolt.hun
This works the best for me:
这对我来说效果最好：
.noSelect:hover {
background-color: white;
}
