-webkit-tap-highlight-color无效

时间:2013-12-31 06:58:19

标签: html css mobile

我正在尝试删除点按高亮颜色。但它不适用于移动设备。当我试图在pc上看到使用inspect元素时它也没有显示。

我的css是

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

我的css上有任何错误..

5 个答案:

答案 0 :(得分:11)

同时使用:

-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' */
}

答案 1 :(得分:4)

我以为我会加入已接受的答案......

使用cursor: pointer也会导致点击突出显示仍然存在(即使在设置 -webkit-tap-highlight-color 之后)。确保将其从继承的元素或父元素中删除。

答案 2 :(得分:1)

有时添加-webkit-user-select: none;有帮助!!

答案 3 :(得分:0)

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

经过大量的修补,结果证明这与高光颜色无关。在开始转换时,div的透明背景颜色被短暂地呈现为完全不透明。要解决这个问题,我只需更换这种透明色:

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

......使用类似的不透明颜色:

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

答案 4 :(得分:0)

我将此代码注入到Muse网站<style>上的<header>标记中,并且对我来说非常有用:

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