代码改变世界

多种方法去除按钮以及链接点击时虚线

2009-05-23 19:12  一醉而过  阅读(885)  评论(0编辑  收藏  举报

按钮点击时的虚线框真是让人难受无论是a下的还是表单下的

搜集整理了一些方法,仁者见仁,

js 方法:

<a href="#" onFocus="if(this.blur)this.blur()"  </a>
CSS方法:

1.

a  {

     outline:none;/*我是秒杀火狐浏览器里面的虚线框的*/
    }

2.无意中饭后逛荡蓝色,看见一老兄写的: <<纯CSS去除按钮以及链接点击时虚线 >> 如获至宝,能CSS干的事儿,就不麻烦js了。

原文如下:

深藏多年秘笈大公开,全世界唯一一家公布,怎么点就是点不出,纯CSS去掉按钮或者链接点击产生的虚线。

html:

1 <style type="text/css"> 
2     .wrap{position:relative;} 
3     .btns{zoom:1;} 
4     .btns *{outline:0;zoom:1;background:#f2f2f2;} 
5     .btns button::-moz-focus-inner{border-color:transparent!important;} 
6 </style> 
7 <div class="wrap">
8     <div class="btns"> 
9         <button type="button">确定</button><button type="button">取消</button> 
10         <a href="#">确定</a><a href="#">取消</a> 
11     </div>
12 </div>
这个东东是无意中的发现,用处数数也瞒多,像ie下带border的button点击时恶心的表现、去掉tab的点击虚线等等。但遗憾的是这个东东在实践中发现,ie下还是容易受样式环境影响。

这个效果的实现重点在于我在无意中发现了IE下的一个bug,这个bug在特定环境会导致按钮或链接点击时失去虚线。其它浏览器就比较简单,支持CSS2的浏览器可以通过设置outline解决,FF的button标签通过私有属性特别处理,DEMO在多个主流浏览器测试通过。