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 和 HTML5 兼容速查表 图文
Apr 01 HTML / CSS
CSS3制作ajax loader icon实现思路及代码
Aug 25 HTML / CSS
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
Sep 02 HTML / CSS
IE浏览器单独写CSS样式的几种方法
Oct 14 HTML / CSS
使用css3实现的windows8开机加载动画
Dec 09 HTML / CSS
css3学习系列之移动属性详解
Jul 04 HTML / CSS
HTML5 Canvas实现文本对齐的方法总结
Mar 24 HTML / CSS
html5仿支付宝密码框的实现代码
Sep 06 HTML / CSS
一款利用html5和css3动画排列人物头像的实例演示
Dec 05 HTML / CSS
HTML5新特性 多线程(Worker SharedWorker)
Apr 24 HTML / CSS
Html5踩坑记之mandMobile使用小记
Apr 02 HTML / CSS
从QQtabBar看css命名规范BEM的详细介绍
Aug 07 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
《APMServ 5.1.2》使用图解
2006/10/23 PHP
php下获取Discuz论坛登录用户名、用户组、用户ID等信息的实现代码
2010/12/29 PHP
php中的常用魔术方法总结
2013/08/02 PHP
PHP那些琐碎的知识点(整理)
2017/05/20 PHP
PHP生成腾讯云COS接口需要的请求签名
2018/05/20 PHP
php使用mysqli和pdo扩展,测试对比mysql数据库的执行效率完整示例
2019/05/09 PHP
可输入的下拉框
2006/06/19 Javascript
用YUI做了个标签浏览效果
2007/02/20 Javascript
jQuery ajax cache缓存问题
2010/07/01 Javascript
js中的scroll和offset 使用比较的实例与分析
2013/09/29 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
2015/02/23 Javascript
Python脚本后台运行的几种方式
2015/03/09 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
2015/04/06 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
2016/11/02 Javascript
Jquery实时监听input value的实例
2017/01/26 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
2017/04/22 Javascript
详解angularjs中如何实现控制器和指令之间交互
2017/05/31 Javascript
老生常谈ES6中的类
2017/07/31 Javascript
Vue组件的使用及个人理解与介绍
2019/02/09 Javascript
JS实现的合并两个有序链表算法示例
2019/02/25 Javascript
微信小程序实现折线图的示例代码
2019/06/07 Javascript
用pandas按列合并两个文件的实例
2018/04/12 Python
阿联酋优惠券服务:Living Kool
2019/12/12 全球购物
一套带网友答案的.NET笔试题
2016/12/06 面试题
护士个人简历自荐信
2013/10/18 职场文书
挂职自我鉴定
2014/02/26 职场文书
课例研修方案
2014/05/31 职场文书
物联网工程专业推荐信
2014/09/08 职场文书
工程部经理岗位职责
2015/02/02 职场文书
2015年综治维稳工作总结
2015/04/07 职场文书
体检通知范文
2015/04/21 职场文书
企业战略合作意向书
2015/05/08 职场文书
格列佛游记读书笔记
2015/06/30 职场文书
中学生国庆节演讲稿2015
2015/07/30 职场文书
2019财务毕业实习报告
2019/06/27 职场文书
css height属性中的calc方法详解
2021/06/03 HTML / CSS