Question

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

我尝试使用outline：none但没有效果。那里有解决方案吗？

Answer 1

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

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

要完全删除突出显示，您可以将值设置为transparent：

-webkit-tap-highlight-color: transparent;

Answer 2

除了使用JavaScript清除文本选择以清除选择的link provided by Floremin之外，您还可以使用纯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-tap-highlight-color: transparent;是您可能需要尝试在Android中获得支持的附加规则。

Answer 3

我正在运行Chrome版本60，之前的CSS答案都没有。

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

:focus {
    outline: none !important;
}

Answer 4

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

Answer 5

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

-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 6

我在<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 7

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

看看这个：

Clear Text Selection with JavaScript

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

Answer 8

这对我来说效果最好：

Private Sub RichTextBox1_KeyUp(ByVal sender As Object, ByVal e As System.Windows.Forms.KeyEventArgs) Handles RichTextBox1.KeyUp
    Dim wordToFind As String = "findword"
    Dim replaceWord As String = "replaceword"
Richtextbox2.rtf = RichTextBox1.replace(wordToFind, replaceWord)

    End If
End Sub

无论如何，要在快速点击时阻止Chrome中的元素蓝色突出显示？

8 个答案: