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媒体查询(Media Queries)介绍
Sep 12 HTML / CSS
css3实现超立体3D图片侧翻倾斜效果
Apr 16 HTML / CSS
css3学习系列之移动属性详解
Jul 04 HTML / CSS
HTML5: Web 标准最巨大的飞跃
Oct 17 HTML / CSS
html5 button autofocus 属性介绍及应用
Jan 04 HTML / CSS
html5 worker 实例(一) 为什么测试不到效果
Jun 24 HTML / CSS
html5的canvas方法使用指南
Dec 15 HTML / CSS
HTML5中的音频和视频媒体播放元素小结
Jan 29 HTML / CSS
HTML5 Canvas绘制五星红旗
May 04 HTML / CSS
浅谈html5增强的页面元素
Jun 14 HTML / CSS
浅析HTML5:'data-'属性的作用
Jan 23 HTML / CSS
HTML5 图片预加载的示例代码
Mar 25 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
PHP nl2br函数 将换行字符转成 &amp;lt;br&amp;gt;
2009/08/21 PHP
自己写的php curl库实现整站克隆功能
2015/02/12 PHP
PHP实现获取中英文首字母
2015/06/19 PHP
JavaScript监测ActiveX控件是否已经安装过的代码
2008/09/02 Javascript
javascript Firefox与IE 替换节点的方法
2010/02/24 Javascript
jQuery实现强制cookie过期方法汇总
2015/05/22 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
2016/04/05 Javascript
Vue.js每天必学之计算属性computed与$watch
2016/09/05 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
2017/01/18 Javascript
微信小程序之数据绑定原理解析
2019/08/14 Javascript
深入浅析JavaScript中的in关键字和for-in循环
2020/04/20 Javascript
[55:04]海涛DOTA2死魂复燃6.82版本介绍
2014/09/28 DOTA
Python实现动态添加类的属性或成员函数的解决方法
2014/07/16 Python
Python访问纯真IP数据库脚本分享
2015/06/29 Python
Python实现矩阵转置的方法分析
2017/11/24 Python
python如何发布自已pip项目的方法步骤
2018/10/09 Python
解决pycharm 误删掉项目文件的处理方法
2018/10/22 Python
如何利用Boost.Python实现Python C/C++混合编程详解
2018/11/08 Python
Python 等分切分数据及规则命名的实例代码
2019/08/16 Python
pygame实现打字游戏
2021/02/19 Python
使用Python的Turtle绘制哆啦A梦实例
2019/11/21 Python
python yield和Generator函数用法详解
2020/02/10 Python
如何在django中运行scrapy框架
2020/04/22 Python
使用keras实现BiLSTM+CNN+CRF文字标记NER
2020/06/29 Python
Python3爬虫里关于Splash负载均衡配置详解
2020/07/10 Python
Python代码覆盖率统计工具coverage.py用法详解
2020/11/25 Python
最新PyCharm 2020.2.3永久激活码(亲测有效)
2020/11/26 Python
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
2014/03/31 HTML / CSS
青蓝工程实施方案
2014/03/27 职场文书
奠基仪式策划方案
2014/05/15 职场文书
小学学习雷锋活动总结
2014/07/03 职场文书
住房抵押登记委托书
2014/09/27 职场文书
当幸福来敲门英文观后感
2015/06/01 职场文书
纯CSS3实现div按照顺序出入效果
2021/07/15 HTML / CSS
vue+echarts实现多条折线图
2022/03/21 Vue.js
Redis实现一个账号只能登录一个设备
2022/04/19 Redis