css如何去除input浏览器下默认的蓝色边框
发布于 作者:苏南大叔 来源:程序如此灵动~在chrome
等浏览器下面,input
被focus
的时候,会出现个蓝色的边框。苏南大叔个人觉得还是蛮不错的,不过有的时候,会和整体设计上不协调,会被要求删除这个蓝色的边框。本文以苏南大叔的后台管理界面为例,说明一下,如何去除这个默认的蓝色边框。
标准答案
这个蓝色的边框,去除的css
代码很简单。如下:
input:focus{
outline:0;
}
对比效果如下:
效果不错。
扩展阅读
然后苏南大叔给大家推荐一个功能,来自chrome
的f12
的css
调试功能,它可以自动模拟focus
等状态的功能。挺好用的。用起来非常简单。
用了这个后,就不用手动去触发对应的input
的状态了。原因嘛,你懂的。f12
的工具,手工触发focus
状态之后,因为要操作下面的界面,鼠标移开后,focus
状态就消失了。然后你就陷入死循环了。
小结
更多前端调试编程文章,欢迎关注苏南大叔的系列博客:



本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
《程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
《程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。
本站的忠实读者小伙伴,正在阅读下面这些文章: