按钮点击时的虚线框真是让人难受无论是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在多个主流浏览器测试通过。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· winform 绘制太阳,地球,月球 运作规律
· AI与.NET技术实操系列(五):向量存储与相似性搜索在 .NET 中的实现
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)