`
kd_8301
  • 浏览: 632 次
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

去掉登录框或者链接的虚线框

 
阅读更多
方法一: IE 下使用expression(this.hideFocus=true), firefox下使用outline: none; (除了FF下对按钮不生效, 其它均有效)  代码:
           css:
            .hideFocus{hide-focus: expression(this.hideFocus=true);}/* for ie 5+ */       
            .hideFocus{outline: none;}  /* for firefox 1.5 + */
           html:
            <a href="#" class="hideFocus">我是链接, 我不想要虚线</a>
           <br/><br/>
            <input type="button" value="我是按钮, 人家也不行要虚线嘛" class="hideFocus" />

  这个方法的缺点是IE下使用expression, 增加了浏览器负担, 而且ff下对按钮也不能生效.

方法二: 使用js onfocus=blur(); 全生效;  代码:
      css: 无
      html:
      <a href="#" onfocus="blur()">我是链接, 我不想要虚线</a>
      <br/><br/>
       <input type="button" value="我是按钮, 人家也不行要虚线嘛" onfocus="blur()" />

这个方法的优点是不需要写任何css代码, 也适应任何情况. 缺点是需要使用js, 而且"链接/按钮"会失去了focus状态, 在一些需要侦测"链接/按钮"focus状态的情况下, 会造成麻烦.

方法三: 结合outline/border/zoom属性实现  代码:
     css:
     .hideFocus2{outline:0;zoom:1;} 
     .hideFocus2::-moz-focus-inner{border-color:transparent!important;}/* 让FF下button也生效 */
     html:
      <h3>方法三: 结合outline/border/zoom属性实现</h3>
      <a href="#" class="hideFocus2">我是链接, 我不想要虚线</a>
      <br/><br/>
      <input type="button" value="我是按钮, 人家也不行要虚线嘛" class="hideFocus2" />

     这个方法暂时没看出有啥明显的缺点, 但暂时不是很清楚zoom:1;为什么就能让ie6去掉了虚线, 是因为促发了hasLayout吗? 这个问题以后搞清楚后, 会回来记录上.
分享到:
评论

相关推荐

    虚线边框去除

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

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

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

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

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

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

    但在某些情况下,比如动态生成的DOM元素或者需要针对特定状态(如鼠标悬停、点击等)来去除边框时,JavaScript就派上用场了。下面,我们来看看如何使用JavaScript实现这一效果: 1. **直接修改样式:** 可以通过...

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

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

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

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

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

    总结起来,去除链接点击时的虚线框,我们可以采用HTML的`hidefocus`属性(仅限IE),CSS的`:focus`伪类结合`outline`属性,或者使用JavaScript动态处理。选择哪种方法取决于兼容性需求、设计要求以及项目的技术栈。...

    去除在FireFox中点击链接时,出现虚线边框的解决办法

    其中一个典型的例子就是在Firefox浏览器中,当用户点击一个链接(a标签)时,链接周围会显示一条虚线边框。这种现象在Internet Explorer和Google Chrome等其他浏览器中并不常见,因此可能给用户带来不一致的视觉体验...

    如何将链接的下划线做成虚线?.rar

    我们在浏览网页的时候,经常可以看到链接的下划线是虚线,或者在link与hover不同状态,下划线会从虚线到实线的变化。这样的效果是如何实现的呢? 其实这样的效果,是设置text-decoration:none。也就是去除了链接的...

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

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

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

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

    css 去除连接时的虚线框

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

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

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

    鼠标指向网页图片时图片周围显示虚线框

    在给定的标题和描述中,提及的问题是“鼠标指向网页图片时图片周围显示虚线框”,这正是通过CSS的`:hover`伪类来改变图片边框样式的一个典型应用。 首先,让我们深入理解这段代码的工作原理。在HTML结构中,有一个`...

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

    这样做虽然能去除链接的虚线边框,但同时也会影响其他需要焦点指示的元素,如按钮,降低用户体验。 更合理的解决办法是在网页的CSS样式表中进行针对性的调整。通常,我们可以利用CSS选择器来定位超链接的`:focus`伪...

    如何将链接的下划线做成虚线?特效代码

    介绍: 我们在浏览网页的时候,经常可以看到链接的下划线是虚线,或者在link与hover不同状态,下划线会从虚线到实线的变化。这样的效果是如何实现的呢? 其实这样的效果,是设置text-decoration:none。也就是去除了...

    IE下target获得焦点时产生虚线问题的解决方法

    然而,在某些情况下,当一个元素如链接(标签)或者输入框(标签)获得焦点时,在Internet Explorer(IE)浏览器中会默认出现一个虚线框,这个虚线框用于指示当前拥有焦点的元素。尽管这个功能在视觉上有助于用户...

    CSS控制文字在一条线中间的方法

    此外,`fieldset`内的`ul`列表展示了其他链接,它们的样式通过`ul`和`li`选择器进行定义,如`list-style-type`去除列表符号,`margin`调整间距。 总之,通过适当的CSS样式设置,我们可以轻松地将文字放置在一条线上...

Global site tag (gtag.js) - Google Analytics