如何实现input输入框，在获得焦点时外边框不变蓝

背景

最近，项目中的网页在测试的时候，发现一个搜索输入框input在360游览器（兼容模式）下显示，在获得焦点时外边框变蓝，而其他FF、IE、Google均未变蓝，现在需要将网页中的所有输入框，都被设计为“获得鼠标焦点时外边框不变蓝”。情况如下所示：

其实，是由于各个游览器的outline默认值不同导致的，所以，解决的方法很简单，将定义outline属性为none，即将下面的css代码加入相对应的选择器中。

 

input:focus{outline:none;}

或者加入到css重置中一劳永逸。另外，也可以将outline属性设置为0。

 

在操作中发现，outline和border有所不同，顺便一起学习下两个属性的不同。

1.outline和border的不同

关于outline的属性（来源W3School）

border 可应用于几乎所有有形的html元素，而outline 是针对链接、表单控件和ImageMap等元素设计。从而另一个区别也可以推理出，那就是：outline的效果将随元素的 focus 而自动出现，相应的由 blur 而自动消失。这些都是浏览器的默认行为，无需JavaScript配合CSS来控制。

另外从 CSS的十八般技巧 一文中还读到的一个区别就是： outline 不会象border那样影响元素的尺寸或者位置。

所以，outline 能告诉用户那一个可以激发事件的html元素获取了焦点，对钟爱键盘操作的用户尤其有意义，增加良好的用户体验。一个清晰悦目的outline设计能提高使用表单的用户体验。 另一方面，outline 也有些讨厌的地方，比如使用CSS设计的Tab(标签页)时，选择一个Tab之后，Tab上的轮廓虚线会一直显示，有些影响美观。

2.outline在input和button上使用的差异

使用input:focus{outline:none;},可以达到“输入框”获得焦点时边框不变蓝的效果。这个效果也可以使用在button上，button:focus{outline:none;}。

但是在Firefox下，对于类型为button的元素，即使设置outline，也还是会出现虚线。

可以使用一个Firefox的私有伪元素button:-moz-focus-inner{border:0;}，特别注意的是-moz-focus-inner特别注意的是reset outline,而是设置border。

参考博客：https://segmentfault.com/a/1190000003936268

                 http://blog.csdn.net/cc7756789w/article/details/50912794

版权声明：本文为博主原创文章，未经博主允许不得转载。