CSS--移动端点击取消高亮--点击取消超链接高亮--去掉选中div后出现的蓝色高亮--点击取消ios蓝色框高亮

早期做项目都会遇到这种情况：移动端点击的时候会出现下图所示的蓝色高亮，有些设备出现的可能是黄色的。

上图所示的蓝色框就是点击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;
}