使用 Cursor:Pointer 触摸/按下对象时禁用蓝色突出显示答案

【问题标题】：Disable Blue Highlight when Touch/Press object with Cursor:Pointer使用 Cursor:Pointer 触摸/按下对象时禁用蓝色突出显示
【发布时间】：2014-10-31 12:22:03
【问题描述】：

每当在 Chrome 中触摸应用了 cursor:pointer 属性的 Div 时，就会出现一个蓝色突出显示。我们怎样才能摆脱它？

我尝试了以下方法：

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

但它们不会影响按下光标时的蓝色突出显示。

【问题讨论】：

标签： html css mobile touch highlight

【解决方案1】：

-webkit-tap-highlight-color:  rgba(255, 255, 255, 0);

解决了这个问题，因为它将高亮颜色设置为透明。

来源：http://samcroft.co.uk/2012/alternative-to-webkit-tap-highlight-color-in-phonegap-apps/

【讨论】：

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

【解决方案2】：

据我所知，Vlad K 的回答可能会导致某些安卓设备出现问题。更好的解决方案：

-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;

【讨论】：

请说明“上面的答案”的替代答案
你为什么用rgba(0,0,0,0)而不是rgba(255,255,255,0)
@GauravAggarwal alpha 空间是有意义的，所以 rgba(0,0,0,0) 和 rgba(255,255,255,0) 之间没有区别。这只是我认为的一个案例。rgba(255,255,255,0) 行为是否怪异？
如果你无论如何都要用透明覆盖它，为什么还要有一个 rgba 声明呢？是否存在不支持该属性的 transparent 关键字的 WebKit 版本？
@BoltClock 。我真的在MDN doc 中找不到“透明”关键字，所以我认为这不是标准的。在我回答这个问题之前，我已经阅读了this article，**Christian Cook **的评论建议添加此内容，因为他遇到了一些 sumsung 设备的问题。我认为这是特定设备的错误。

【解决方案3】：

只需将此添加到您的样式表中，然后将class="no_highlights" 属性添加到您希望应用此类的元素。

no_highlights{
  -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;
}

或者您可以通过删除类名并执行此操作来对所有元素全局执行此操作。

button,
textarea,
input,
select,
a{
 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 -webkit-tap-highlight-color: transparent;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
  user-select: none;

}

谢谢 :) 但无论如何。蓝色边框作为辅助功能。它看起来很糟糕，但是它可以帮助最需要它的人。

【讨论】：

请注意，您不应在 input/select/textarea 元素上使用 (-*-)user-select:none。这给 iOS 上的 Safari 带来了很多麻烦；尝试专注于这些元素时，最终没有弹出键盘操作。
如果你删除它，用另一个视觉指示器替换它。

【解决方案4】：

根据docs，您可以这样做：

-webkit-tap-highlight-color: transparent; /* for removing the highlight */

它适用于 Android 版 Chrome 68 和 Windows 版 Chrome 80。

【讨论】：