`
lbyzx123
  • 浏览: 478133 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

如何去掉链接的虚线框

 
阅读更多

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

链接虚线框

在 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>

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

分享到:
评论

相关推荐

    去掉超链接的虚线框

    当用户通过鼠标或触摸设备点击超链接时,大多数浏览器默认会在链接周围显示一个虚线框,这通常被称为“焦点轮廓”(focus outline)。这个设计的初衷是为了增强可访问性,帮助视觉障碍用户或使用键盘导航的用户更...

    如何去掉图片热点链接或超链接的虚线框?.rar

    这种效果在某些设计中可能并不符合视觉要求,因此,如何去掉图片热点链接或超链接的虚线框是网页开发者常遇到的问题。本教程将详细介绍如何通过CSS代码来解决这个问题。 首先,了解HTML中的`&lt;a&gt;`标签,它是用来创建...

    虚线边框去除

    虚线边框通常用于表示选中、可点击或者非主要元素的状态,但有时我们可能希望去掉这些边框以达到更简洁或统一的界面效果。本文将深入探讨如何在不同场景下,通过CSS(Cascading Style Sheets)来实现虚线边框的去除...

    去掉点击链接时出现的虚线.rar

    标题“去掉点击链接时出现的虚线”所涉及的知识点,就是如何通过编程技术,特别是JavaScript,来消除这种链接的虚线边框。 在HTML中,`&lt;a&gt;`标签用于创建超链接,当用户鼠标悬浮或点击链接时,浏览器会根据其默认...

    CSS去掉A标签(链接)虚线框的方法

    至于IE浏览器,比较遗憾的是,目前还没有找到通过CSS去掉链接虚线框的完美解决方法。所以,只能使用IE特有的`hidefocus`属性来实现这一需求。 总结来说,去除非必要的焦点轮廓线,主要集中在移除`outline`属性,并...

    javascript经典特效---去掉图片链接周围虚线.rar

    这在某些设计风格中可能并不符合预期,因此我们需要找到方法来去掉这个虚线边框。本主题围绕“JavaScript经典特效——去掉图片链接周围虚线”展开,我们将探讨如何利用JavaScript来解决这个问题。 首先,我们需要...

    去掉点击链接时出现的虚线框的几个方法

    总结以上方法,我们可以看到虽然去除链接虚线框的需求很常见,但是实现的方法各有优劣,需要根据目标浏览器和项目需求来选择最适合的方案。需要注意的是,移除虚线框可能会使得键盘导航变得更困难,因为视觉上不再有...

    css去掉链接虚框

    在网页设计中,当用户通过键盘导航(例如使用Tab键)或使用辅助技术(如屏幕阅读器)与页面交互时,浏览器默认会在可聚焦元素(如`&lt;a&gt;`标签、某些表单元素等)周围显示一个虚线边框,称为“焦点轮廓”或“虚框”。...

    去掉a标签超链接的虚线框的方法

    去掉a标签超链接的虚线框的方法 在网页设计中,a标签超链接的虚线框是非常常见的,但有时我们需要去掉这种虚线框以提高用户体验。今天,我们将讨论如何去掉a标签超链接的虚线框。 一、使用outline属性 在Firefox中...

    去掉点击链接时周围的虚线框outline属性

    在`.xzw_test a:focus`的例子中,只有类名为`.xzw_test`的链接在聚焦时不会显示虚线框。 **方法三:JavaScript处理** 如果上述方法不能满足需求,或者需要在特定情况下移除虚线框,可以使用JavaScript进行处理。...

    IE4 IE5中点击一个图片链接(实际是链接获得焦点)或者文字连接的时候,周围就会出现一圈讨厌的虚线框,用这个插件可以去掉

    IE4 IE5中点击一个图片链接(实际是链接获得焦点)或者文字连接的时候,周围就会出现一圈讨厌的虚线框,用这个插件可以去掉

    swfobject.js 去掉网页上Flash的虚线框.rar

    细心的网友都会发现,以前在网页上显示Flash动画的地方,Flash的四周都会被一个虚线框包围着,当把鼠标放上的时候它就会出现,而且需要双击两次鼠标Flash的链接才生效,这样给用户带来了极大的不便,使用swfobject....

    使用CSS去掉超链接的虚线边框的方法

    在前端制作的过程中会发现,一些文字/图片链接,或者一些input控件,在点击时会在周围出现虚线边框,一般会在火狐和IE浏览器下出现虚线框,谷歌下不会有。  这些虚线边框是作为对视觉设计的一种辅助,在不使用鼠标...

    如何去掉图片热点链接或超链接的虚线框?特效代码

    这个虚线框在视觉上可能会影响到页面的整体美观,尤其是在追求精致设计的现代网页中,去掉这个边框显得尤为重要。本教程将详细介绍如何通过CSS代码来消除图片热点链接或超链接的虚线框。 首先,我们要理解什么是...

    使用JS CSS去除IE链接虚线框的三种方法

    `来去掉虚线框,但在IE中无效: ```css a:focus { outline: none; } ``` 3. **HTML标签属性**: - **方法三**:使用`hidefocus`属性,此属性仅在IE浏览器中有效: ```html 设计蜂巢 ``` 4. **HTC...

    css去掉点击连接时所产生的虚线边框技巧兼容符合w3c标准的浏览器

    当用户在网页上进行操作时,特别是点击链接元素时,浏览器往往会默认给这些元素加上一个虚线框来标示出当前被激活的元素,这种行为在不同的浏览器上可能会有所不同,但其主要目的是为了向用户指示哪个元素是当前焦点...

    html消除点击超链接后产生的线框

    - **辅助功能**:虽然消除虚线框可以提高页面美观度,但对于部分依赖键盘导航的用户来说,可能会降低可访问性。因此,在实施此类更改之前,需要评估其对网站可访问性的影响。 - **测试**:在部署任何解决方案之前,...

    css 去除连接时的虚线框

    通常,当用户点击一个链接时,浏览器默认会在该链接周围显示一个虚线框,用以向用户指示哪个元素是可交互的。但这种默认的虚线框往往会影响到网页的视觉效果,特别是在设计师追求极简风格或者需要更加精细控制页面...

Global site tag (gtag.js) - Google Analytics