Chrome 浏览器中,当触摸或按下一个有 cursor:pointer 属性的 Div 元素时,会出现的一种蓝色高亮效果。如何消除这种效果?

每当在 Chrome 中触及应用了指针属性的 Div 时,都会出现一个蓝色高亮。 我们怎样才能摆脱它?

我试过以下方法:

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

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

80945 次浏览
-webkit-tap-highlight-color:  rgba(255, 255, 255, 0);

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

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

据我所知,Vlad K 的回答可能会给一些机器人设备带来问题。更好的解决方案:

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

Simply add this to your stylesheet and simply add the class="no_highlights" attribute to the element you wish to apply this class to.

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

}

谢谢:) 但不管怎样,蓝色边框是一个可访问的特性。它看起来很糟糕,但是,它帮助了最需要它的人。

根据 医生,你可以简单地这样做:

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

我在安卓的 Chrome68和 Windows 的 Chrome80上都可以使用。

加入 CSS

css

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

tailwind

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