网页制作 
首页 > 网页制作 > 浏览文章

CSS去除移动端点击时元素产生的背景色 (推荐)

(编辑:jimmy 日期: 2024/11/28 浏览:3 次 )

在点击产生背景色的元素的css样式上加上以下代码:   
 

-webkit-tap-highlight-color: transparent;

ps:下面看下css取消a标签在移动端点击时的背景颜色

一、取消a标签在移动端点击时的蓝色
 

-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-user-select: none;
-moz-user-focus: none;
-moz-user-select: none;

二、使用图片作为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;
}

三、改变选中内容的背景颜色

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

  四、去除ios input框点击时的灰色背景

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

总结

以上所述是小编给大家介绍的CSS去除移动端点击时元素产生的背景色,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

上一篇:详解CSS Sprite雪碧图的应用
下一篇:详解css外边距折叠(margin collapsing)
一句话新闻
高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 网站地图 SiteMap