失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > 多种方法去除按钮以及链接点击时虚线

多种方法去除按钮以及链接点击时虚线

时间:2019-11-30 02:27:07

相关推荐

多种方法去除按钮以及链接点击时虚线

按钮点击时的虚线框真是让人难受无论是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在多个主流浏览器测试通过。

如果觉得《多种方法去除按钮以及链接点击时虚线》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。