Home » CSS/HTML » 如何去掉链接的虚线框

如何去掉链接的虚线框

当一个链接得到焦点时,默认会有个虚线框。如图:

链接虚线框

在 Firefox 里可以用 -moz-outline:none; 或者 outline:none; 来将其去掉。所以我们可以这样写:

a:focus {
    outline:none;
    -moz-outline:none;
}


顺便提一下,如果你用过 Safari 和 Chrome 可能会发现,当输入框得到焦点时边框会出现阴影效果。

safari和chrome的默认输入框

如果想去掉阴影效果也可以用 outline 属性。

input,textarea {
    outline:none;
}

言归正传,刚刚说的是 Firefox ,现在说说 IE。首先比较遗憾,还没有找到通过 CSS 去掉 IE 链接虚线框比较好的解决办法。所以只能用一个替代的办法,就是 a 标签的 hidefocus 属性(这个属性是 IE 独有的)。

<a href="#" hidefocus="true">链接</a>

注意:JS 脚本对应的属性名是:hideFocus。对应的 JS 代码应该是:
xxx.hideFocus = ‘true’;

还有一种不推荐的办法。就是让链接得到焦点的时候失去焦点。

<a href="#" onfocus="this.blur();">链接</a>

这种办法很管用,但过于暴力,最好不要用了。

相关文章:纯CSS去除按钮以及链接点击时虚线

2009.06 18

If you enjoyed reading, you can bookmarking and sharing its on your favorite sites.

声明:本文采用Creative Commons License进行许可。转载请注明出自: 如何去掉链接的虚线框

5 Comments

  • yaugle

    2009年06月28日 3:20 下午

    恩,不错,学习了

  • hzhjun

    2009年06月29日 8:22 上午

    不错,很实用!

  • justjavac

    2010年09月7日 8:41 上午

    :lol:

  • HHTecShare

    2010年09月13日 7:24 下午

    其实,把元素换成就不会有这个虚线框了,其他的也没什么影响。

  • HHTecShare

    2010年09月13日 7:26 下午

    @HHTecShare

    我晕,显示不出来我输入的HTML元素,我是想说,吧<input>元素换成<div>就可以了~

Leave a Comment :

:) :D :( :o 8O :? 8) :x :P :| ;) :lol: :oops: :cry: :evil: :twisted: :roll: :!: :?: :idea: :arrow: :mrgreen:

You can use these tags:
  1. <a href="" title="">
  2. <abbr title="">
  3. <acronym title="">
  4. <b>
  5. <blockquote cite="">
  6. <cite>
  7. <code>
  8. <del datetime="">
  9. <em>
  10. <i>
  11. <q cite="">
  12. <strike>
  13. <strong>

Recent Comments

  • HHTecShare

    HHTecShare

    @HHTecShar»

  • HHTecShare

    HHTecShare

    其实,把元素换成就不»

  • justjavac

    justjavac

    »

  • CSSBaby

    CSSBaby

    @文行天下 谢»

  • 文行天下

    文行天下

    这个网站的主题真不错»