关注前端开发微信微信号web007007

去掉超链接或按钮点击时出现的虚线边框

作者 管理员 发布时间 2012-08-20 16:59 文章分类 DIV&CSS 文章评论 抢沙发 阅读次数

纯CSS去掉超链接或按钮点击时出现的虚线边框

<head>
<style type="text/css">
a,input,button{ outline:none; }
::-moz-focus-inner{border:0px;}
</style>
</head>
<body>
<a href="http://www.web92.net" target="_blank" title="WEB前端开发网" alt="WEB前端开发网">WEB前端开发网</a>
<a href="http://www.web92.net" target="_blank" title="前端攻城狮剥壳" alt="前端攻城狮剥壳">前端攻城狮剥壳</a>
<a href="http://www.web92.net" target="_blank" title="WEB前端开发网" alt="WEB前端开发网">www.web92.net</a>
<input type="button" value="www.web92.net"/>
<button>www.web92.net</button>
</body>

从以上代码可以看出,可以通过设置CSS属性outline解决。

FF存在bug,其中input,button标签通过私有属性::-moz-focus-inner特别处理

以上方法在IE6、IE7下无效。可使用 onfocus 属性解决,如下:

<a href=”http://www.web92.net” target=”_blank” onfocus=”this.blur()”>admin10000.com</a>

使用jquery方法只需一句,非常简单,支持所有浏览器

$(“a,input,button”).focus(function(){this.blur()});

 

 

 

 

本文固定链接: http://www.web92.net/640.html | WEB前端开发

该日志由 于2012年08月20日发表在 DIV&CSS 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: 去掉超链接或按钮点击时出现的虚线边框 | WEB前端开发
关键字: