css 去除按钮、链接的虚线框的方法举例

发布时间:2020-03-17编辑:脚本学堂
本文介绍下,在css代码中,去掉按钮、链接的虚线框的方法,有需要的朋友不妨参考下。

本节内容:
css去除按钮或链接中的虚线框

去除虚线框,大多会这样写:
 

复制代码 代码示例:
a:focus, input[type=button] ,input[type=submit] {
   outline:none;
}

注意两点:
1,去除不全面
IE6/7 并不支持 outline 属性, firefox 下 input 的虚线并没有去除

2,去除太多
除 IE6/7 外的所有浏览器的按钮(firefox没去掉)和链接都被去掉虚线框

好像这是看起来矛盾的两个问题。其实不然,因为是两个现同性质的问题。
从技术上,这个方法并不全面。
从体验上,只是去掉部分不需要的,去掉全部并不友好。

所以,上面的写法个人并不推荐。

可以在用 TAB 键时不去掉虚线框吗?
为什么input 在 firefox 下没有成功去除虚线框?

总结:
 

去除的方式        生效的浏览器
outline:none      IE8 | Firefox | Webkit |Opera
hidefocus          IE
:focus{outline:none;}    IE8 | Firefox | Webkit | Opera
:active{outline:none;}    同上,但在tab的时候,IE将保留虚线框
::-moz-focus-inner{outline:none;}   Firefox 存着bug,input 须要去这个伪状态下的边框

可以参考如上的方法,去除虚线框。希望对大家有所帮助。