当使用光标:指针触摸/按下对象时禁用蓝色高亮显示

Question

每当在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;

但是它们不会影响光标按下时的蓝色高亮显示。

- Ulad Kasach

Answer 1

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

通过将突出显示颜色设置为透明，解决了这个问题。

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

- Ulad Kasach

---

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

Answer 2

据我所知，Vlad K的答案可能会在某些安卓设备上引起问题。更好的解决方案：

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

- Oboo Cheng

---

请澄清“上面的答案”的备选答案是哪一个。 - Nima Derakhshanjan

为什么你使用了 rgba(0,0,0,0) 而不是 rgba(255,255,255,0)？ - Gaurav Aggarwal

@GauravAggarwal Alpha 空间是有意义的，因此 rgba(0,0,0,0) 和 rgba(255,255,255,0) 之间没有区别。我认为这只是一个例子。rgba(255,255,255,0) 表现得奇怪吗？ - Oboo Cheng

如果你最终还是要用透明覆盖它，为什么还要声明rgba呢？是否存在某些WebKit版本在此属性上不支持透明关键字的情况？ - BoltClock

我在MDN文档中找不到“transparent”关键字，所以我认为它不是标准用语。在回答这个问题之前，我阅读了这篇文章，Christian Cook的评论建议添加此内容，因为他遇到了一些三星设备的问题。我认为这是特定设备的错误。 - Oboo Cheng

Answer 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;
    }

您也可以为所有元素全局执行此操作，方法是删除类名并执行以下操作。

or you can do this globally for all the elements by removing class name and doing this.

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

谢谢 :) 但是，蓝色边框作为一种辅助功能存在。虽然它看起来很糟糕，但这对于最需要它的人有所帮助。

- asith

---

请注意，不应在输入/选择/文本区域元素上使用(-*-)user-select:none。这会在iOS的Safari中引起很多麻烦；当尝试聚焦这些元素时，最终无法弹出键盘。 - Ken Verhaegen

如果您将其移除，请用另一个视觉指示器替换它。 - Kalnode

Answer 4

根据文档，您可以简单地这样做：

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

在安卓手机上的Chrome 68和Windows上的Chrome 80中，这对我有效。

- Eric Mutta

Answer 5

添加到CSS中

CSS

html {
   -webkit-tap-highlight-color: transparent;
}

尾风CSS

@layer base {
  html {
    -webkit-tap-highlight-color: transparent;
  }
}

- LeulAria

---

您应该指定这是为了 Tailwind CSS。 - Oneezy

Answer 6

我认为最合理的答案是使用-webkit-tap-highlight-color: transparent;在所有浏览器中都能模糊显示，并且我自己在我的博客https://www.ramlyhaba.com/上实施了它。

- Ramly Haba