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

Posted 2023-03-06

【中文标题】-webkit-tap-highlight-color 不起作用

【英文标题】：-webkit-tap-highlight-color is not working

【发布时间】：2014-01-18 03:32:02

【问题描述】：

我正在尝试删除点击突出显示颜色。但它不适用于移动设备。当我试图在 pc 上查看使用检查元素时，它也没有显示。

我的 CSS 是

button, button:hover, li:hover, a:hover , li , a , *:hover, *

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

我的 css 是否有任何错误..

【问题讨论】：

***.com/questions/3159729/…

是的，我已经看到了这个问题

:active 可能会对您有所帮助。

outline：还没有尝试过...

我又发现了一个问题***.com/questions/5210481/…

【参考方案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' */

【讨论】：

做所有这些都会大大损害可访问性。

【参考方案2】：

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

【参考方案3】：

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

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

【讨论】：

在找到您的答案之前，我费了很大的力气。但奇怪的是，cursor: pointer 不会在同一声明中定义 -webkit-user-select 或直接在标签的 style 属性中定义时产生干扰。

[更新] 我的意思是-webkit-tap-highlight-color。现在它甚至可以使用cursor: pointer。我不明白。

:( 哦，那不好玩。我想为 PC 用户提供任何交互元素的指针光标，但避免在移动设备上不必要的点击突出显示...

【参考方案4】：

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

经过大量修改，结果发现这与高亮颜色无关。 div 的透明背景颜色在开始转换时短暂呈现为完全不透明。为了解决这个问题，我简单地替换了这个透明颜色：

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

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

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

【参考方案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;                 
    

【讨论】：

欢迎来到 Stack Overflow，在这里回答时请考虑添加解释以及您的解决方案以何种方式帮助解决问题，这对 OP 和其他寻找类似问题的人都有帮助。