背景
最近,项目中的网页在测试的时候,发现一个搜索输入框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
版权声明:本文为博主原创文章,未经博主允许不得转载。