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 border-image详解、应用及jQuery插件
Aug 29 HTML / CSS
一款纯css3实现简单的checkbox复选框和radio单选框
Nov 05 HTML / CSS
推荐一些比较有用的css3新属性
Nov 11 HTML / CSS
CSS3的RGBA中关于整数和百分比值的转换
Aug 04 HTML / CSS
CSS3的first-child选择器实战攻略
Apr 28 HTML / CSS
CSS中的字体大小设置属性总结
May 24 HTML / CSS
使用CSS3实现字体颜色渐变的实现
Aug 10 HTML / CSS
涂鸦板简单实现 Html5编写属于自己的画画板
Jul 05 HTML / CSS
网易微博Web App用HTML5开发的过程介绍
Jun 13 HTML / CSS
基于第一个PhoneGap(cordova)的应用详解
May 03 HTML / CSS
Html5 Canvas动画基础碰撞检测的实现
Dec 06 HTML / CSS
CSS3 实现NES游戏机的示例代码
Apr 21 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
ThinkPHP3.1新特性之Action参数绑定
2014/06/19 PHP
PHP创建/删除/复制文件夹、文件
2016/05/03 PHP
php制作基于xml的RSS订阅源功能示例
2017/02/08 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
PHP实现一维数组与二维数组去重功能示例
2018/05/24 PHP
Laravel5.1 框架控制器基础用法实例分析
2020/01/04 PHP
JS getMonth()日期函数的值域是0-11
2010/02/15 Javascript
jquery ui dialog ie8出现滚动条的解决方法
2010/12/06 Javascript
UI Events 用户界面事件
2012/06/27 Javascript
jquery插件制作 手风琴Panel效果实现
2012/08/17 Javascript
javascript中文本框中输入法切换的问题
2013/12/10 Javascript
jquery浏览器滚动加载技术实现方案
2014/06/03 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
2014/09/06 Javascript
jQuery简单几行代码实现tab切换
2015/03/10 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
2016/03/28 Javascript
JSON 必知必会 观后记
2016/10/27 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
2018/09/05 jQuery
vue项目中,main.js,App.vue,index.html的调用方法
2018/09/20 Javascript
vue接口请求加密实例
2020/08/11 Javascript
NodeJS开发人员常见五个错误理解
2020/10/14 NodeJs
[01:29]2017 DOTA2国际邀请赛官方英雄手办展示
2017/03/18 DOTA
[49:43]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
学习python (1)
2006/10/31 Python
Python运算符重载用法实例
2015/05/28 Python
python实现TF-IDF算法解析
2018/01/02 Python
python实现局域网内实时通信代码
2019/12/22 Python
Python类的动态绑定实现原理
2020/03/21 Python
python网络编程之五子棋游戏
2020/05/14 Python
django models里数据表插入数据id自增操作
2020/07/15 Python
详解如何修改python中字典的键和值
2020/09/29 Python
英国排名第一的礼品体验公司:Red Letter Days
2018/08/16 全球购物
开发中都用到了那些设计模式?用在什么场合?
2014/08/21 面试题
运动会开幕式邀请函
2014/02/03 职场文书
节能宣传周活动总结
2014/05/08 职场文书
经济贸易专业自荐信
2014/06/11 职场文书
求职自荐信该如何书写?
2019/06/24 职场文书