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 动画技术
Jul 27 HTML / CSS
CSS3动画animation实现云彩向左滚动
May 09 HTML / CSS
CSS Grid布局教程之网格单元格布局
Dec 30 HTML / CSS
使用CSS3来绘制一个月食图案
Jul 18 HTML / CSS
结合CSS3的布局新特征谈谈常见布局方法
Jan 22 HTML / CSS
css3media响应式布局实例
Jul 08 HTML / CSS
详解Canvas事件绑定
Jun 27 HTML / CSS
基于HTML5 WebGL的3D机房的示例
Mar 16 HTML / CSS
html5移动端价格输入键盘的实现
Sep 16 HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
Apr 23 HTML / CSS
html5拖拽应用记录及注意点
May 27 HTML / CSS
css filter和getUserMedia的联合使用
Feb 24 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
CodeIgniter图像处理类的深入解析
2013/06/17 PHP
Apache启动报错No space left on device: AH00023该怎么解决
2015/10/16 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
JS 文件大小判断的实现代码
2010/04/07 Javascript
jQuery boxy弹出层插件中文演示及使用讲解
2011/02/24 Javascript
jQuery操作checkbox选择(list/table)
2013/04/07 Javascript
JavaScript中解析JSON数据的三种方法
2015/07/03 Javascript
动态设置form表单的action属性的值的简单方法
2016/05/25 Javascript
Bootstrap开关(switch)控件学习笔记分享
2016/05/30 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
2016/06/06 Javascript
第三篇Bootstrap网格基础
2016/06/21 Javascript
Actionscript与javascript交互实例程序(修改)
2016/09/22 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
2016/11/18 Javascript
Jquery删除css属性的简单方法
2016/12/04 Javascript
vue-router2.0 组件之间传参及获取动态参数的方法
2017/11/10 Javascript
angular2路由之routerLinkActive指令【推荐】
2018/05/30 Javascript
ionic使用angularjs表单验证(模板验证)
2018/12/12 Javascript
vue生命周期的探索
2019/04/03 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
2019/10/30 Javascript
Vue 技巧之控制父类的 slot
2020/02/24 Javascript
Python httplib,smtplib使用方法
2008/09/06 Python
从零学python系列之数据处理编程实例(一)
2014/05/22 Python
Python 专题三 字符串的基础知识
2017/03/19 Python
用tensorflow搭建CNN的方法
2018/03/05 Python
python实现俄罗斯方块游戏
2020/03/25 Python
python切片(获取一个子列表(数组))详解
2019/08/09 Python
python网络编程 使用UDP、TCP协议收发信息详解
2019/08/29 Python
基于CSS3实现图片模糊过滤效果
2015/11/19 HTML / CSS
关于圣诞节的广播稿
2014/01/26 职场文书
高级销售求职信
2014/02/21 职场文书
安全生产责任书范本
2014/04/15 职场文书
甜品店创业计划书
2014/09/21 职场文书
领导莅临指导欢迎词
2015/09/30 职场文书
pytorch交叉熵损失函数的weight参数的使用
2021/05/24 Python
如何解决.cuda()加载用时很长的问题
2021/05/24 Python
Python中的socket网络模块介绍
2022/07/23 Python