用CSS3移除点击交互元素的高亮背景

我在移动设备上测试前面教程的图表实例时发现,当手指点击图表出现ToolTip时,图表容器的会出现一个半透明的高亮背景。设备浏览器不一样,颜色也不一样,很是影响交互效果。试了一下用Javascript来移除,花了一天时间也没弄出来,最后不得不Google了,又花了几个小时,终于用CSS3搞定了。

代码如下:

-webkit-tap-highlight-color: rgba(255, 255, 255, 0); 
-webkit-user-select: none;
-moz-user-focus: none;
-moz-user-select: none;

新增了禁止选择文本的功能。其中,前二句对WebKit内核浏览器(Safari、Chrome、iPhone、iPad、Android等)有效,后二句对Gecko内核的浏览器(Firefox等)有效。

看来真该花些时间学学CSS3了。

发表评论