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


Posted in HTML / CSS onApril 01, 2014

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

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

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

复制代码
代码如下:
a:focus {
outline:none;
-moz-outline:none;
}

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

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

如果想去掉阴影效果也可以用 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>

这种办法很管用,但过于暴力,最好不要用了。
HTML / CSS 相关文章推荐
CSS3实现伪类hover离开时平滑过渡效果示例
Aug 10 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
Feb 24 HTML / CSS
html5使用html2canvas实现浏览器截图的示例
Aug 31 HTML / CSS
谷歌浏览器小字体处理方案即12px以下字体
Dec 17 HTML / CSS
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
May 08 HTML / CSS
HTML5 在canvas中绘制文本附效果图
Jun 23 HTML / CSS
多视角3D逼真HTML5水波动画
Mar 03 HTML / CSS
HTML5 LocalStorage 本地存储刷新值还在
Mar 10 HTML / CSS
iphoneX 适配客户端H5页面的方法教程
Dec 08 HTML / CSS
深入理解HTML5定时器requestAnimationFrame的使用
Dec 12 HTML / CSS
HTML5新增form控件和表单属性实例代码详解
May 15 HTML / CSS
css height属性中的calc方法详解
Jun 03 HTML / CSS
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
Mar 31 #HTML / CSS
你应该知道的30个css选择器
Mar 19 #HTML / CSS
纯CSS3打造动感漂亮时尚的扇形菜单
Mar 18 #HTML / CSS
CSS3中background-clip和background-origin的区别示例介绍
Mar 10 #HTML / CSS
CSS3中:nth-child和:nth-of-type的区别深入理解
Mar 10 #HTML / CSS
CSS书写规范、顺序和命名规则
Mar 06 #HTML / CSS
纯CSS3实现鼠标悬停提示气泡效果
Feb 28 #HTML / CSS
You might like
粗略计算在线时间,bug:ip相同
2006/12/09 PHP
实例(Smarty+FCKeditor新闻系统)
2007/01/02 PHP
PHP基础知识介绍
2013/09/17 PHP
PHP Switch 语句之学习笔记
2013/09/21 PHP
jQuery右键菜单contextMenu使用实例
2011/09/28 Javascript
弹出层之1:JQuery.Boxy (一) 使用介绍
2011/10/06 Javascript
如何将JS的变量值传递给ASP变量
2012/12/10 Javascript
js禁止页面使用右键(简单示例代码)
2013/11/13 Javascript
javascript贪吃蛇完整版(源码)
2013/12/09 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
2017/02/17 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
2017/03/09 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
2017/03/15 Javascript
JavaScript数据结构中串的表示与应用实例
2017/04/12 Javascript
Angular中$state.go页面跳转并传递参数的方法
2017/05/09 Javascript
利用canvas实现的加载动画效果实例代码
2017/07/05 Javascript
Angular4.x Event (DOM事件和自定义事件详解)
2018/10/09 Javascript
jquery登录的异步验证操作示例
2019/05/09 jQuery
微信小程序利用for循环解决内容变更问题
2020/03/05 Javascript
关于AngularJS中几种Providers的区别总结
2020/05/17 Javascript
Python生成随机数的方法
2014/01/14 Python
Opencv+Python 色彩通道拆分及合并的示例
2018/12/08 Python
为何人工智能(AI)首选Python?读完这篇文章你就知道了(推荐)
2019/04/06 Python
Python实现的对一个数进行因式分解操作示例
2019/06/27 Python
python中的colorlog库使用详解
2019/07/05 Python
Python 脚本的三种执行方式小结
2019/12/21 Python
Python unittest单元测试框架及断言方法
2020/04/15 Python
英国当代时尚和街头服饰店:18montrose
2018/12/15 全球购物
HelloFresh奥地利:立即订购烹饪盒
2019/02/22 全球购物
美国珠宝精品店:Opulent Jewelers
2019/08/20 全球购物
小米俄罗斯授权商店:Xiaomi俄罗斯
2019/12/08 全球购物
游戏商店:Eneba
2020/04/25 全球购物
编程实现去掉XML的重复结点
2014/05/28 面试题
解除劳动合同协议书
2014/04/14 职场文书
2014年初一班主任工作总结
2014/11/08 职场文书
2015年保险公司工作总结
2015/04/24 职场文书
检察院起诉意见书
2015/05/20 职场文书