在chrome等浏览器下面，input被focus的时候，会出现个蓝色的边框。苏南大叔个人觉得还是蛮不错的，不过有的时候，会和整体设计上不协调，会被要求删除这个蓝色的边框。本文以苏南大叔的后台管理界面为例，说明一下，如何去除这个默认的蓝色边框。

苏南大叔：css如何去除input浏览器下默认的蓝色边框 - input_01
css如何去除input浏览器下默认的蓝色边框（图3-1）

标准答案

这个蓝色的边框，去除的css代码很简单。如下：

input:focus{
  outline:0;
}

对比效果如下：

苏南大叔：css如何去除input浏览器下默认的蓝色边框 - over
css如何去除input浏览器下默认的蓝色边框（图3-2）

效果不错。

扩展阅读

然后苏南大叔给大家推荐一个功能，来自chrome的f12的css调试功能，它可以自动模拟focus等状态的功能。挺好用的。用起来非常简单。

苏南大叔：css如何去除input浏览器下默认的蓝色边框 - input_03
css如何去除input浏览器下默认的蓝色边框（图3-3）

用了这个后，就不用手动去触发对应的input的状态了。原因嘛，你懂的。f12的工具，手工触发focus状态之后，因为要操作下面的界面，鼠标移开后，focus状态就消失了。然后你就陷入死循环了。

小结

更多前端调试编程文章，欢迎关注苏南大叔的系列博客：

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可，规模化镜像抄袭本站内容的行为，将会根据有关法律法规进行维权。
《程序如此灵动~》下所有原创文章，如被用于商业用途，请您按规定支付稿费。

 【苹果】苹果生态程序员QQ群【787907940】，等您来加入

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件，请点此获取

 【绝密】秘籍文章入口，仅传授于有缘之人   css

本站的忠实读者小伙伴，正在阅读下面这些文章：