纯CSS搞定按钮、链接点击时的虚线

最新推荐文章于 2022-02-14 20:35:16 发布

转载最新推荐文章于 2022-02-14 20:35:16 发布 · 909 阅读

WEB前端专栏收录该内容

11 篇文章

订阅专栏

本文揭示了一个意外发现的CSS技巧，用于去除按钮和链接点击时产生的虚线，适用于多种浏览器环境，特别是针对IE下带有边框的button点击表现不佳的情况。文中提供了代码示例，并讨论了不同浏览器的支持情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

源地址：http://tommyfan.com/blog/demo/none_outline/

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

<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>

这个东东是无意中的发现，用处数数也瞒多，像ie下带border的button点击时恶心的表现、去掉tab的点击虚线等等。但遗憾的是这个东东在实践中发现，ie下还是容易受样式环境影响。

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