CSS3去除移动端点击元素时产生的高亮背景色

21-06-2019
最近更新于:2022-06-15 18:38:07

CSS3去除移动端点击元素时产生的高亮背景色

做了一段时间的移动端项目了,碰到了一个顽固的BUG: 即点击一个icon元素的时候,发现底部会有一块蓝色的高亮。最终,只用了一小段的css代码就解决了

tap-highlight-color

(移动端上)有事件监听的元素被点击的时候会被高亮显示,比如我的android上表现为一个蓝框加上半透明的背景,这有时候会和我本来的样式格格不入,就要想办法去掉。

以下是对应的 CSS 代码:

tap-highlight-color: transparent;
    -webkit-tap-highlight-color: transparent;

这个属性是用于设定元素在移动设备(如Adnroid、iOS)上被触发点击事件时,响应的背景框的颜色。

想要禁用这个高亮,设置颜色的alpha值为0即可。

也可以通过rgba设置颜色,例:

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

评论留言

既来之则留之,欢迎在下方留言评论。提交评论后还可以撤销或重新编辑,未发布的留言会被储存在本地以供下次继续编辑(Valine 会自动保存您的评论信息到浏览器)