css去掉超链接点击时的边框虚线
今天在群里,有小伙伴问了一个问题:如果将点击超链接时出现的边框虚线去掉。
关于这个问题,小编以前给一个朋友做网站的时候,他也提到了这个要求。
当时也是丈二和尚摸不着头脑,网上也还没有相关的资料,csdn上面也没有找到相关的问题。
后来自己摸索,outline是轮廓的意思,在css中就是元素周围的一条线,如果将outline设置为none不是就解决了吗?
当然,除了超链接a标签,其他input、button也都适用。
其中有三种方法
第一种,如下css代码:
a,input{outline:none;}
第二种
a{blr:expression(this.onFocus=this.blur());outline: none;}
第三种,使用jquery实现
$("a,input,button").focus(function(){this.blur()});
如果ie6、7不兼容失效,请使用下面的方法
<a href="http://www.santii.com" target="_blank" onfocus="this.blur()">三体教程</a>
小编觉得,去除超链接边框的需求,要么是为了美观,要么就是有强迫症,哈哈!