纯CSS去除按钮以及链接点击时虚线
这个效果的实现重点在于我在无意中发现了IE下的一个bug,这个bug在特定环境会导致按钮或链接点击时失去虚线。
其它浏览器就比较简单,支持CSS2的浏览器可以通过设置outline解决,FF的button标签通过私有属性特别处理,DEMO在多个主流浏览器测试通过。
<style type="text/css">
.wrap{position:relative;}
.btns{zoom:1;}
.btns *{outline:0;zoom:1;background:#f2f2f2;}
.btns button::-moz-focus-inner{border-color:transparent!important;}
</style>
<div class="wrap">
<div class="btns">
<button type="button">确定</button><button type="button">取消</button>
<a href="#">确定</a><a href="#">取消</a>
</div>
</div>
.wrap{position:relative;}
.btns{zoom:1;}
.btns *{outline:0;zoom:1;background:#f2f2f2;}
.btns button::-moz-focus-inner{border-color:transparent!important;}
</style>
<div class="wrap">
<div class="btns">
<button type="button">确定</button><button type="button">取消</button>
<a href="#">确定</a><a href="#">取消</a>
</div>
</div>
结果