锋言锋语

NferZhuang的自留地

css3的-webkit-tap-highlight-color属性

背景

在移动端触发点击事件时,会出现一个半透明的灰色背景,不同的设备和浏览器表现不同,那么如何去掉这个默认设置,以保持和PC浏览器的处理一致。

例如,在触发点击事件时,iOS系统的Safari浏览器中则显示一个浅灰色的小框,而Android系统的浏览器会在元素周围显示一个蓝色的小框,具体效果如下图:

webkit-tap-highlight-color%e6%95%88%e6%9e%9c

demo测试页面:http://phonegap-tips.com/demos/webkit-tap-highlight-color.html

解决方法

给可点击元素添加-webkit-tap-highlight-color属性即可:

  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent; /* For some Androids */

属性详解

英文说明:

Overrides the highlight color shown when the user taps a link or a JavaScript clickable element in Safari on iPhone.

This property obeys the alpha value, if specified. If you don’t specify an alpha value, Safari on iPhone applies a default alpha value to the color. To disable tap highlighting, set the alpha value to 0 (invisible). If you set the alpha value to 1.0 (opaque), the element is not visible when tapped.

引用自《http://css-infos.net/property/-webkit-tap-highlight-color

中文说明:

当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时,覆盖显示的高亮颜色。
-webkit-touch-callout 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。
该属性可以只设置透明度。如果未设置透明度,iOS Safari使用默认的透明度。当透明度设为0,则会禁用此属性;当透明度设为1,元素在点击时不可见。
iOS 1.1.1及更高版本的Safari浏览器可用,大部分android手机也是支持的,只是显示效果有所不同。

引用自《http://www.css88.com/book/css/webkit/behavior/tap-highlight-color.htm

 

文 / nfer
LEAVE A REPLY

loading