纯CSS去除按钮以及链接点击时虚线

mseed

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

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在多个主流浏览器测试通过。