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

最新推荐文章于 2025-07-06 22:06:06 发布

转载最新推荐文章于 2025-07-06 22:06:06 发布 · 1.7k 阅读

文章标签：

#css #button #xhtml #class #html #border

本文介绍了一种使用纯CSS去除按钮或链接点击后产生的虚线的方法，通过设置outline为0，并针对Firefox浏览器的特殊伪元素进行处理。

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="Content-Language" content="utf-8"/> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> .wrap{position:relative;} .btns{zoom:1;} .btns *{outline:0;zoom:1;background:#f2f2f2;} .btns button::-moz-focus-inner{border-color:transparent!important;} </style> </head> <body> <div class="wrap"> <div class="btns"> <button type="button">确定</button><button type="button">取消</button> <a href="#" mce_href="#">确定</a><a href="#" mce_href="#">取消</a> </div> </div> </body> </html>

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