去除android及ios上td标签产生的边框

2017-09-22 961 0 编辑:深正互联 来源:互联网

最近刚做完的移动端的项目,其中一个是课程表功能,类似于超级课程表。现在在测试阶段,发现了不少bug,其中一个bug 我来总结下,就是如何去除移动设备上的a,button,input,table,td元素产生的边框;在ios和android系统,当手指触摸屏幕a标签链接或按钮时,会产生不同的效果:

1,对于ios点击元素的时候,就会出现一个半透明的灰色背景;

2,对于android则出现红色的边框。

对这2个系统自带的效果,这种体验的意义无非为了告知用户按钮已经点击到,带来的价值是好的。可惜带来了体验的同时,也带来了bug......

在搜索引擎中找到资料-webkit-tap-highlight-color可以去除边框,如下图:

wabAppBorder (1).jpg

去除android及ios上td标签产生的边框-前端度

排除误解

网络资料说这个属性只用于iOS(iPhone和iPad),其实是错误的,android手机大部分也是支持的,只是显示效果不一样,移动开发并不成熟,更多的还需要大家去实践来辨别真伪- -

-webkit-tap-highlight-color用法

webkit内核的浏览器,当用户点击一个链接或者通过js定义的可点击元素的时候,会出现一个半透明的灰色背景或者红色的边框。

如果想要禁用高亮,可设置颜色的alpha值为0,也就是属性值的最后一位设置为0就可以去除背景或者边框。

去除android链接触摸时产生边框的css代码

a,button,input,table,td{-webkit-tap-highlight-color:rgba(255,0,0,0);}

/* 1.去除android a/button/input标签被点击时产生的边框 2.去除ios a标签被点击时产生的半透明灰色背景 */ 


本站文章均为深正网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,但谢绝直接搬砖和抄袭!感谢...
关注深正互联