`

如何去掉链接虚线框,css去链接虚线,html链接虚线框隐藏

 
阅读更多

链接的虚线框影响整体风格,我们在工作经常会将它去掉,而采用图片高亮的方式来显示焦点状态。然而去掉虚线框在两种浏览器中却分别对待,这种技巧经常用到,作个记录,以备不时之需。

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

 

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

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

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

 

 

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

 input,textarea  {
   outline :none ;
}

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

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

注意:JS 脚本对应的属性名是:hideFocus。对应的 JS 代码应该是:

xxx.hideFocus ="true";

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

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

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

分享到:
评论

相关推荐

    【 border虚线】CSS border虚线边框属性教程

    学习之路不可停止,最近在研究CSS,今天爱站技术频道的小编就給你们带来这篇CSS border虚线边框属性教程,教大家如何使用css制作网页中的虚线,巩固CSS border属性使用方法,感兴趣的同学可以参考一下。

    去掉超链接的虚线框

    对于IE浏览器,还可以创建一个HTC文件(如blur.htc),并在CSS中引用它,利用`behavior`属性实现去虚线框的效果。 ```html &lt;!-- blur.htc 文件 --&gt; ()"/&gt; function makeblur() { this.blur(); } ``` 然后在CSS...

    html设置分割线虚线,css border设置虚线样式

    下面将详细讲解如何利用HTML和CSS中的`border`属性来设置虚线样式,以及创建分割线的方法。 首先,HTML没有专门的标签用于创建分割线,但我们可以使用`&lt;hr&gt;`标签来模拟分割线的效果。`&lt;hr&gt;`标签在页面中生成一条...

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

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

    虚线边框去除

    对于特定的HTML元素,如按钮或链接,你可以直接指定该元素的CSS类来去除虚线边框: ```css .no-border { border-style: none; } ``` 然后在HTML中将此类应用到相应元素上: ```html 点击我 ``` 3. **只...

    html 图像加虚线框的方法

    在HTML和CSS中,为图像添加虚线框是一种常见的网页设计技巧,用于强调或装饰页面元素。本篇文章将深入探讨如何使用CSS实现这一功能,并提供一个实例文件供您下载研究。 首先,我们要知道HTML中的`&lt;img&gt;`标签用于...

    css_实现虚线_CSS

    本主题聚焦于一个特定的CSS技术:如何利用CSS来创建虚线边框。虚线边框在网页布局中常常用于区分不同的内容区块,或者用于指示可点击的元素。 ### CSS 虚线边框的基本语法 在CSS中,我们可以使用`border-style`...

    IE浏览器去掉FLASH虚线框的两种方法

    标题 "IE浏览器去掉FLASH虚线框的两种方法" 涉及的是在使用Internet Explorer(IE)浏览含有Flash内容的网页时,如何消除Flash对象周围的虚线边框的问题。这通常是一个视觉上的优化,因为虚线边框可能会影响网页的...

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

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

    css去掉链接虚框

    ### CSS去掉链接虚框知识点详解 #### 一、概述 在网页设计中,当用户通过键盘导航(例如使用Tab键)或使用辅助技术(如屏幕阅读器)与页面交互时,浏览器默认会在可聚焦元素(如`&lt;a&gt;`标签、某些表单元素等)周围...

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

    可以通过给链接标签()添加onfocus属性并设置其值为this.blur()来去掉虚线框。onfocus事件会在链接获得焦点时触发,而this.blur()是一个JavaScript方法,用于使链接失去焦点,从而去除虚线框。代码示例为: ()"&gt;...

    纯CSS 做的虚线表格

    本文将深入探讨如何仅使用CSS(Cascading Style Sheets)来制作虚线边框的表格,这是一种优雅且灵活的方法,可以提升网页的视觉效果。 首先,让我们了解CSS的基本结构。CSS是一种样式表语言,用于描述HTML或XML...

    border虚线样式,带颜色

    当提到“border虚线样式,带颜色”时,我们主要关注的是如何在HTML和CSS中设置元素的边框为虚线,并且赋予其各种颜色,如红色、绿色或黄色。下面将详细介绍这一知识点。 首先,边框样式(border-style)属性允许...

    css 去除连接时的虚线框

    因此,需要使用CSS来去除或隐藏这种虚线框。 根据给定文件信息,主要有两种方法可以去除链接时的虚线框,一种是使用CSS属性“outline”并将其值设置为“none”,另一种是使用一个特定于旧版IE浏览器的表达式。 1. ...

    纯HTML CSS JS目录树形框TreeView

    【纯HTML CSS JS目录树形框TreeView】是一种利用前端技术实现的交互式树状结构,主要用于展示层次化的数据。在不依赖任何外部JavaScript库的情况下,它仅通过HTML、CSS和JavaScript来创建。这样的设计使得代码更简洁...

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

    这篇文章主要介绍了四种方法来去除IE链接上的这个虚线框,分别是使用JavaScript、CSS、HTML标签属性以及HTC(HTML Component)技术。 1. **JavaScript方法**: - **方法一**:利用`onfocus`事件。当链接获取焦点时...

    CSS教程:text-indent隐藏文字出现虚线框outline

    隐藏文字,此效果在 IE 中是正常的,但在 Firefox 里,鼠标点击该链接时,虚线框却会包住被缩进的文字,结果显示为虚线框 N 长。  因为平时是用overflow:hidden; 属性的,所以一直也没有注意到这个问题的存在,但...

    swfobject 2.2 去除网页Flash(SWF文件)的虚线框

    它解决了早期Flash插件检测和内容替换的问题,同时还提供了去除Flash周边虚线框的功能。 要去除Flash的虚线框,我们需要做以下几步: 1. **引入swfobject**:在HTML文件中,你需要引入swfobject.js文件。这可以...

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

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

Global site tag (gtag.js) - Google Analytics