移动端点击事件出现背景框以及pc端a标签点击时出现背景框？？？

最新推荐文章于 2021-11-10 10:48:20 发布

原创最新推荐文章于 2021-11-10 10:48:20 发布 · 9.2k 阅读

4 ·

CC 4.0 BY-SA版权

兼容性问题同时被 2 个专栏收录

10 篇文章

订阅专栏

移动端

3 篇文章

订阅专栏

本文介绍了解决移动端点击元素时出现的默认背景高亮问题的方法，通过CSS设置透明度为0来实现。同时，对于PC端，提供了重置a标签active状态背景颜色的解决方案。此外，还分享了如何自定义网页中文本被选中时的背景颜色。

1、原因：移动端事件响应时会有默认的背景框颜色，a标签active时也有默认的背景框颜色。

2、解决方法：

(1) 移动端让背景框不显示

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

(2) pc端重置a标签active时的背景框颜色

a:active{
  background-color: 需要设置的颜色;
}

3、附加小技巧：

通常我们选中文字时的背景色是蓝色。我们可以用以下样式去设置网页的选中内容的样式：

::selection {
    background: #FFF;
    color: #333;
}
::-moz-selection {
    background: #FFF;
    color: #333;
}
::-webkit-selection {
    background: #FFF;
    color: #333;
}

如果要去掉选中时的颜色，把background都置为none就行了。