`

去掉超链接的虚线框

 
阅读更多

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

链接虚线框

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

分享到:
评论

相关推荐

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

    使用样式表可以对整站点的超链接虚线框进行批量处理。例如: ``` a { blr: expression_r(this.onFocus = this.blur()); } ``` 如果是图片区域,可以加: ``` area { blr: expression_r(this.onFocus = this....

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

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

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

    总结一下,通过以上两种方法,我们可以轻松地去除图片热点链接或超链接的虚线框,提升网页的视觉效果。在实际开发中,根据项目需求和代码维护性,可以选择适合自己的方式来实现这一目标。记住,良好的用户体验往往...

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

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

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

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

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

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

    firefox的超链接点击去除扩大的难看虚线的解决方法

    尽管许多网站选择通过CSS去除超链接的虚线边框以优化视觉效果,但这样做可能会影响到辅助技术的用户。因此,设计师和开发者在处理这个问题时应权衡美观与可访问性的关系,考虑提供一种既美观又能兼顾无障碍访问的...

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

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

    css实现a“标签点击无虚线.rar

    1. **去除默认边框** 最简单的方法是为所有的`&lt;a&gt;`标签设置边框为零: ```css a { border: none; } ``` 这将删除所有`&lt;a&gt;`标签的边框,包括点击时可能出现的虚线边框。 2. **悬停状态下的边框** 如果只想在...

    CSS常见11条技巧与经验收集

    7. 去除超链接虚线框: 超链接默认有轮廓线,可以通过`outline: none`去除,但在IE7及更低版本中,可能需要通过JavaScript的`onfocus`事件配合`blur()`方法实现。 8. 标准模式与怪异模式盒模型差异: 标准模式下...

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

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

    如何去掉图片点击后的超级链接产生的虚框问题(两种实现方法)

    本文将介绍两种有效的方法来去除图片点击后超级链接产生的虚框,以提升用户体验。 方法一: 这种方法主要利用HTML的属性和JavaScript来实现。首先,我们可以为`&lt;a&gt;`标签添加`onfocus`事件,当该链接获取焦点时,...

    使用CSS去掉网页中超链接的下划线示例

    然而,在某些设计中,我们可能希望去除超链接的默认下划线,并根据超链接的不同状态自定义颜色和下划线样式。 要实现这一目标,可以通过CSS(层叠样式表)来控制超链接的显示样式。CSS为开发者提供了一系列的伪类...

    14个CSS实用技巧精选推荐 (2).pdf

    2. **Firefox超链接虚线去除**:在Firefox下,点击超链接时会出现虚线边框,可以通过设置`a{outline: none;}`来消除。 3. **页面居中对齐**:若希望固定宽度的页面居中显示,可以将最外层的容器`div`设为相对定位,...

    请保留超链接的outline属性

    因此,去除链接的`outline`属性应谨慎对待。在移除`outline`之前,必须确保有其他有效的视觉指示来替代,比如改变背景色、边框或使用伪类(如`:focus`)来实现高亮效果。这样做不仅保持了网页的视觉一致性,还能确保...

    javascript常用代码.pdf

    - 要去掉超链接的默认边框,可以在链接样式中添加`onfocus="this.blur()"`,这会在链接获得焦点时立即失去焦点,从而隐藏边框。 9. **网页元信息**: - `META`标签用于设置网页的元信息,如设置关键词以利于搜索...

    计算机应用基础模块五完美版.ppt

    占位符是幻灯片上的一个重要概念,它是一个带有提示文字的虚线框,用户可以通过点击添加相应的内容。 在制作“古诗鉴赏”演示文稿的过程中,首先需要创建新的演示文稿,然后制作标题幻灯片和内容幻灯片。这涉及到...

Global site tag (gtag.js) - Google Analytics