-webkit-tap-highlight-color不起作用

Question

我正在尝试删除点击突出显示颜色。但它无法移动工作。当我尝试在PC上使用检查元素查看时，它也没有显示。

我的 css 是

button, button:hover, li:hover, a:hover , li , a , *:hover, *
{
  -webkit-tap-highlight-color: rgba(0,0,0,0); 
}

我的 CSS 上是否有任何错误。

Answer 1

同时使用：

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

或

* {
    -webkit-touch-callout:none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust:none;             /* prevent webkit from resizing text to fit */
    -webkit-tap-highlight-color:rgba(0,0,0,0); /* prevent tap highlight color / shadow */
    -webkit-user-select:none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
}

Answer 2

我想

我会添加到接受的答案中......

使用 cursor: pointer 也会导致点击突出显示持续存在（即使在设置 -webkit-tap-highlight-color 之后）。确保在它继承的元素或父元素上删除它。

Answer 3

添加-webkit-user-select: none;有时会有所帮助！！

Answer 4

我的div 似乎被突出显示了，即使我使用了必要的 CSS 标签来删除突出显示颜色。这只发生在Android WebView API 26中。

经过大量修补，事实证明这与高光颜色无关。div 的透明背景颜色在开始过渡时短暂地呈现为完全不透明。为了解决这个问题，我简单地替换了这个透明颜色：

div.style.background = "rgba(0, 0, 255, .05)";

。具有类似的不透明颜色：

div.style.background = "rgba(246, 246, 255, 1)";

Answer 5

我将此代码注入了 Muse 网站上<header>的 <style> 标签中，并且非常适合我：

   * {
        -webkit-touch-callout:none;               
        -webkit-text-size-adjust:none;          
        -webkit-tap-highlight-color:rgba(0,0,0,0);
        -webkit-user-select:none;                 
    }