`

如何去除点击链接时出现的虚线框

阅读更多

有时候在一个页面用到收放功能的时候时,总有一个虚线框在触发收放的功能按钮上,显得特别刺眼,那如何去除这个虚线框呢?

虽然从可用性的角度,隐藏虚线框的做法会让键盘偏执狂不满。但从视觉上,有时候虚线框确实影响美观。

方法一:

IE 下可使用其私有的html属性:hideFoucs,在标签的结构中加入 hidefocus=”true” 属性。即:

<a href="http://www.taobao.com" hidefocus="true" title="淘宝网,淘我喜欢">淘宝网</a>

而在 Firfox 浏览器中则相对比较容易,直接给标签 a 定义样式 outline:none; 就可以了,即:

.HideFocus {
outline:none;
}

方法二:

也可以仅用 CSS 来控制,即对 IE 的情形使用 expression 表达式,但不推荐使用,毕竟 expression 在性能上有问题。

.HideFocus {
hide-focus: expression(this.hideFocus=true);  /* for ie 5+ */
outline: none;  /* for firefox 1.5 + */
}

opera9 似乎默认就不显示焦点虚线框。

除链接外,该 CSS 同样适用于 input 和 button 标签。

IE6, IE7, FF1.5, FF2, Opera9 测试通过。

分享到:
评论

相关推荐

    css 去除连接时的虚线框

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

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

    在CSS中,去除点击链接时产生的虚线边框主要可以通过设置样式属性来实现。最直接的方法就是通过CSS的`outline`属性,这个属性用于设置元素周围的一条轮廓线,当元素获取焦点时显示。如果要隐藏这种轮廓线,可以将`...

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

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

    去掉CAD框选的颜色显示?从左往右和从右往左不一样?.docx

    此外,文中提到的相关推荐阅读话题,如CAD的MV命令用于调整图纸比例,图层管理器的新建、删除和置为当前操作,以及如何处理炸开后的文字连接和去除CAD图片的边框,这些都是CAD使用过程中常见的功能和技巧。...

    visio画图技巧参考.pdf

    可以这样验证, 点击图形中的每一个元素 ( 如:边、角 ) ,如果点击后是整个图形进入编辑状态,说明是整体的,然后放大目测是否封闭, 其实这样检查是在无法填充时才需要的。如何保证画的图形为封闭整体图形呢, ...

    精雕软件教程

    - **连接虚线**:使用左键连接虚线段,以形成完整的图形。 #### 六、图像真色填充 - **虚拟雕塑工具**:使用虚拟雕塑工具框选需要填充颜色的区域。 - **新建模型**:创建一个新的模型,并调整其参数,如顶点数等。...

    经典Dreamweaver插件

    ie55_scroll 自定义浏览器滚动条的特效CSS Marquee 插入滚动文字效果 scrubber 去除点击超级链接时的虚线显示 chromeless_win_wind 制作弹出无边浏览小窗口,现在网上最为流行的 ...

    70款经典Dreamweaver插件

    scrubber 去除点击超级链接时的虚线显示 chromeless_win_wind 制作弹出无边浏览小窗口,现在网上最为流行的 scrollablearea 使用层制作IE中可控制上下滚动的看板 right_click_menu_builder 右键菜单扩展功能 ...

    Dreamweaver 插件集

    去除点击超级链接时的虚线显示 chromeless_win_wind 制作弹出无边浏览小窗口,现在网上最为流行的 scrollablearea 使用层制作IE中可控制上下滚动的看板 right_click_menu_builder 右键菜单扩展功能 flashtext 制作仿...

    超详细的Intellij IDEA 看源码必备技能

    例如,添加一个名为"Student"的类,如果它与当前显示的类没有继承关系,那么就不会出现连接箭头。 此外,IntelliJ IDEA提供了查看具体代码的功能。双击类名可以打开类的详细视图,然后在方法列表中选择你需要查看的...

    高级AutoCAD工程师绘图技巧

    19. **无虚线框显示**:确保“动态输入”和“启用对象捕捉”设置正确。 20. **实框选取**:检查“对象捕捉”设置,关闭不必要的捕捉模式。 21. **命令行对话框**:在“选项”对话框中恢复默认设置。 22. **添加...

    2021-2022计算机二级等级考试试题及答案No.10870.docx

    根据给定文件的信息,我们可以总结出...- **知识点解析**:自然连接是一种基于公共字段连接两个表的操作,它会自动去除重复的列。 以上知识点涵盖了从基础概念到具体操作的各个方面,有助于加深对相关领域知识的理解。

Global site tag (gtag.js) - Google Analytics