欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

移动端下,点击a标签背景高亮问题的解决方法 蓝色背景色 有大用

 在制作某个移动端项目的时候,发现当我们点击链接,input标签或者div盒子的时候,整个标签会出现颜色块并会闪烁一下,不仅影响美观,而且会极大降低了用户体验。

  解决方案:-webkit-tap-highlight-color: transparent;//透明

  调试:-webkit-tap-highlight-color:red;  //加上这行代码,背景就会变成红色。

  代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Title</title>
<style>
a{
width: 100px;
height: 100px;
display: block;
border: 1px solid #ccc;
-webkit-tap-highlight-color: transparent;
}
div{
width: 100px;
height: 100px;
border: 1px solid red;
cursor: pointer;
}
</style>
</head>
<body>
<a href="#"></a>
<input type="text">
<div></div>
</body>
</html>

是不是还要加上 下面的代码呢?

/* for IE */

a,area { blr:expression(this.onFocus=this.blur()); }

/* for Firefox */

a:focus { outline: none; }


a{

-webkit-tap-highlight-color: transparent;

}



来自  https://www.cnblogs.com/leaderspider/p/7242433.html


来自  https://blog.csdn.net/weixin_30383279/article/details/95208982


在手机端点击链接时会发现有一个背景色,有时候需要改变这个颜色,或者去除这个颜色,有时候a标签做成按钮时这个颜色的存在会很丑,像这样:

可以通过

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

来去除这个高亮,这样在移动端点击按钮时就不会再有这个问题了

彼岸花开开彼岸, 奈何桥前可奈何。 望乡台下忘川水, 三生石边卖孟婆。 涅槃同魔魔恋相, 浮生若梦梦蹉跎。 唯有余生舞日月, 白驹过隙大风歌。


来自  https://www.cnblogs.com/maderlzp/p/7607121.html

手机端a标签点击出现背景的解决方法

如上图所示,手机/移动端点击 a 链接会有一个背景,尝试设置 background: none 无效。

解决方法:

给元素设置一个 -webkit-tap-highlight-color 就可以了:

a:focus {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /*解决手机版点击背景问题*/
}

如果无效,多设置几个:

a, a:hover, a:visited, a:link, a:active , a:focus {
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /*解决手机版点击背景问题*/
}

-webkit-tap-highlight-color:

这是一个鲜为人知的属性,只用于iOS (iPhone和iPad)。

当你点击一个链接或者通过 Javascript 定义的可点击元素的时候,它就会出现一个半透明的灰色背景。要重设这个表现,你可以设置 -webkit-tap-highlight-color 为任何颜色。

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

示例:设置高亮色为 50% 透明的红色:

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

浏览器支持: 只有iOS(iPhone和iPad)。


来自  https://www.w3h5.com/post/354.html








普通分类: