做了一段时间的移动端项目了,碰到了一个顽固的BUG: 即点击一个icon元素的时候,发现底部会有一块蓝色的高亮。
最终,只用了一小段的css代码就解决了:
-webkit-tap-highlight-color: transparent;
这个属性是用于设定元素在移动设备(如Adnroid、iOS)上被触发点击事件时,响应的背景框的颜色。
想要禁用这个高亮,设置颜色的alpha值为0即可。
也可以通过rgba设置颜色。
示例:设置高亮色为50%透明的红色:
-webkit-tap-highlight-color: rgba(255,0,0,0.5);