解决h5页面点击元素出现灰色背景

时间:2024-04-15 18:20:11

H5页面,iOS以及部分Android手机链接a等标签点击的时候,会有阴影,怎么解决?

-webkit-tap-highlight-color 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中,是webkit内涵浏览器扩展css,webkit专属。

当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时,覆盖显示的高亮颜色。

该属性可以只设置透明度。如果未设置透明度,iOS Safari使用默认的透明度。当透明度设为0,则会禁用此属性;当透明度设为1,元素在点击时不可见。

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

-webkit-tap-highlight-color:transparent; 

将其颜色设置 为全透明即可,用rgba或者transparent皆可。通常,可置于项目重置样式中。

div {
    /*关键代码*/
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}