每当在 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;
但是它们不会影响光标按下时的蓝色高亮。
-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.
class="no_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; }
谢谢:) 但不管怎样,蓝色边框是一个可访问的特性。它看起来很糟糕,但是,它帮助了最需要它的人。
根据 医生,你可以简单地这样做:
-webkit-tap-highlight-color: transparent; /* for removing the highlight */
我在安卓的 Chrome68和 Windows 的 Chrome80上都可以使用。
加入 CSS
html { -webkit-tap-highlight-color: transparent; }
@layer base { html { -webkit-tap-highlight-color: transparent; } }