森森网络

如何有效去除input获取焦点时的默认边框?

 

来源:森森网络 管理员     阅读:2088      2016-7-25 21:49

 

 

今天我们还是讲一讲在开发铜虎网移动端时遇到的一些小问题以及解决的方法。首先我们看看下面两张登录界面的前后对比图。

第一张,在输入登录账号获取焦点时,input周边出现了一个黄色的边框。有的浏览器显示的是一个蓝色边框。


第二张,是经过处理后的界面,在获取焦点时,这个默认的边框消失了。

在PC端,如果出现这样的默认边框是习以为常的,也不影响用户体验,但到了手机端一看到这些边框感觉就不是那么美观了,那么如何去除呢?其实只要对input进行CSS样式设置即可轻松解决。

html:


CSS:


对input进行样式设置时加上outline:none 和border:0就能很好的达到去除默认边框的效果。经过测试,该解决方法在手机端的UC浏览器、QQ浏览器、微信内置浏览器中均有效。

 

|   关于我们   |   联系我们   |   网站地图   |
CopyRight © 2013-2016 安庆市森森网络科技有限公司版权所有    皖ICP备15018643号-1