早期做项目都会遇到这种情况:移动端点击的时候会出现下图所示的蓝色高亮,有些设备出现的可能是黄色的。
上图所示的蓝色框就是点击div之后显示的框。
解决方法
我在网上找了好多资料都说让给body设置样式,加了下面的代码:
html {
-webkit-text-size-adjust: 100%
}
body{
-webkit-tap-highlight-color: transparent;/*把高亮颜色设置为透明,也可以使用rgba的形式*/
}
但是,我发现我写了之后这个问题依然没解决。
一般情况下是textarea、input、select等表单控件在选中状态或者是获得焦点状态下默认会有outline。
div默认情况下是不会有的,但是当div用来做点击的时候,就可能会出现蓝色框高亮。
而这个问题的关键其实就在于这个outline
于是我又在以上基础上添加了以下代码:
div:focus{
outline: none;
}
ok,问题解决。
outline:none 同样适用于超链接标签取消高亮
补充去掉其他标签点击时的高亮
1.取消a标签点击时的高亮
a {
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-user-select: none;
-moz-user-focus: none;
-moz-user-select: none;
}
2.a标签中包含图片,即点击图片触发超链接时,去掉触发touchstart出现的灰色背景
a,a:hover,a:active,a:visited,a:link,a:focus{
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
outline:none;
background: none;
text-decoration: none;
}
3.去掉ios图片被选中的蓝色背景
img {
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-user-select: none;
-moz-user-focus: none;
-moz-user-select: none;
user-select: none;
}