admin管理员组

文章数量:1562478

        最近做web app项目时,经常出现一些链接在点击的时候会出现蓝色的边框,例如图片、链接等等,点击的时候都会有这种蓝色边框,出于项目需求要将其去掉,将蓝色边框改为手指触摸屏幕与手指离开屏幕做一个背景色的切换。

解决以上问题是用到一个比较偏门的CSS3属性:

-webkit-tap-highlight-color

       这个属性只用于webkit内核的浏览器(现在绝大多数手机浏览器都是webkit)。当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个半透明的灰色背景。要重设这个表现,你可以设置-webkit-tap-highlight-color为任何颜色。

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

示例

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

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


 

* { -webkit-tap-highlight-color: transparent }

将上面的CSS放入全局,就可以解决手机浏览器 点击链接出现蓝色虚线框。

本文标签: 边框浏览器蓝色链接手机