触摸/按光标对象时指示禁用蓝色高光:指针

时间:2014-09-06 20:55:11

标签: html5 css3 mobile touch highlight

只要在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;

但是按下光标时它们不会影响蓝色突出显示。

4 个答案:

答案 0 :(得分:72)

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

解决问题,因为它将高光颜色设置为透明。

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

答案 1 :(得分:57)

就我所知,Vlad K的答案可能会导致某些Android设备出现问题。更好的解决方案:



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




答案 2 :(得分:1)

只需将其添加到样式表中,并只需将class="on_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;
}

或者您可以通过删除类名并执行此操作来全局地对所有元素执行此操作。

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;

}

谢谢:)

答案 3 :(得分:0)

根据docs,您可以简单地执行以下操作:

Member Id

它适用于Android上的Chrome 68和Windows上的Chrome 80。