我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

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

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

标准答案

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

input:focus{
  outline:0;
}

对比效果如下:

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

效果不错。

扩展阅读

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

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

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

小结

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

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

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