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的一个简单导航栏实现
Aug 03 HTML / CSS
详解CSS3选择器:nth-child和:nth-of-type之间的差异
Sep 18 HTML / CSS
使用HTML5捕捉音频与视频信息概述及实例
Aug 22 HTML / CSS
解决H5的a标签的download属性下载service上的文件出现跨域问题
Jul 16 HTML / CSS
详解Html5中video标签那些属性和方法
Jul 01 HTML / CSS
关于 HTML5 的七个传说小结
Apr 12 HTML / CSS
HTML5中的autofocus(自动聚焦)属性介绍
Apr 23 HTML / CSS
HTML5 canvas基本绘图之绘制五角星
Jun 27 HTML / CSS
canvas 实现 github404动态效果的示例代码
Nov 15 HTML / CSS
Html5跳转到APP指定页面的实现
Jan 14 HTML / CSS
用CSS3画一个爱心
Apr 27 HTML / CSS
HTML中的表单元素介绍
Feb 28 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
神族 PROTOSS 概述
2020/03/14 星际争霸
php缓存技术详细总结
2013/08/07 PHP
ThinkPHP采用GET方式获取中文参数查询无结果的解决方法
2014/06/26 PHP
php动态绑定变量的用法
2015/06/16 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
php+laravel依赖注入知识点总结
2019/11/04 PHP
判断脚本加载是否完成的方法
2009/05/26 Javascript
JavaScript 的方法重载效果
2009/08/07 Javascript
两个JavaScript jsFiddle JSBin在线调试器
2010/03/14 Javascript
javascript window.opener的用法分析
2010/04/07 Javascript
最新28个很棒的jQuery 教程
2011/05/28 Javascript
jQuery的slideToggle方法实例
2013/05/07 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
2013/05/27 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
2015/08/31 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
2016/08/23 Javascript
bootstrap table支持高度百分比的实例代码
2018/02/28 Javascript
微信小程序实现签字功能
2019/12/23 Javascript
nodejs实现的http、https 请求封装操作示例
2020/02/06 NodeJs
在vue中使用echarts(折线图的demo,markline用法)
2020/07/20 Javascript
[01:05:24]Ti4 冒泡赛第二天 iG vs NEWBEE 3
2014/07/15 DOTA
Python中的赋值、浅拷贝、深拷贝介绍
2015/03/09 Python
用Python的Django框架来制作一个RSS阅读器
2015/07/22 Python
python 开发的三种运行模式详细介绍
2017/01/18 Python
pytorch 获取层权重,对特定层注入hook, 提取中间层输出的方法
2019/08/17 Python
使用Pandas的Series方法绘制图像教程
2019/12/04 Python
python3检查字典传入函数键是否齐全的实例
2020/06/05 Python
用css3实现当鼠标移进去时当前亮其他变灰效果
2014/04/08 HTML / CSS
单位办理社保介绍信
2014/01/10 职场文书
家长写给孩子的评语
2014/04/18 职场文书
2014高考励志标语
2014/06/05 职场文书
城南旧事读书笔记
2015/06/29 职场文书
2015年挂职锻炼个人总结
2015/10/22 职场文书
ajax请求前端跨域问题原因及解决方案
2021/10/16 Javascript
python turtle绘图命令及案例
2021/11/23 Python
Python中的turtle画箭头,矩形,五角星
2022/03/16 Python
HTML常用标签超详细整理
2022/03/19 HTML / CSS