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来编写响应式的页面
Nov 01 HTML / CSS
css3的@media属性实现页面响应式布局示例代码
Feb 10 HTML / CSS
推荐10个CSS3 制作的创意下拉菜单效果
Feb 11 HTML / CSS
纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例
Nov 11 HTML / CSS
html5+css3之CSS中的布局与Header的实现
Nov 21 HTML / CSS
css3遮罩层镂空效果的多种实现方法
May 11 HTML / CSS
深入剖析webstorage[html5的本地数据处理]
Jul 11 HTML / CSS
canvas像素画板的实现代码
Nov 21 HTML / CSS
html5 分层屏幕适配的方法
Mar 16 HTML / CSS
微信浏览器取消缓存的方法
Mar 28 HTML / CSS
canvas像素点操作之视频绿幕抠图
Sep 11 HTML / CSS
HTML5实现应用程序缓存(Application Cache)
Jun 16 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脚本的10个技巧(8)
2006/10/09 PHP
php获取访问者IP地址汇总
2015/04/24 PHP
php实现window平台的checkdnsrr函数
2015/05/27 PHP
Laravel 队列使用的实现
2019/01/08 PHP
Laravel事件监听器用法实例分析
2019/03/12 PHP
laravel 事件/监听器实例代码
2019/04/12 PHP
slice函数的用法 之不错的应用
2006/12/29 Javascript
jQuery 操作XML入门
2008/12/25 Javascript
Jquery+JSon 无刷新分页实现代码
2010/04/01 Javascript
Json对象与Json字符串互转(4种转换方式)
2013/03/27 Javascript
用javascript关闭本窗口不弹出询问框的方法
2014/09/12 Javascript
jquery.ajax之beforeSend方法使用介绍
2014/12/08 Javascript
fullpage.js最后一屏滚动方式
2018/02/06 Javascript
angular2 ng2-file-upload上传示例代码
2018/08/23 Javascript
react的滑动图片验证码组件的示例代码
2019/02/27 Javascript
JavaScript判断对象和数组的两种方法
2019/05/31 Javascript
vue实现购物车加减
2020/05/30 Javascript
vue使用vant中的checkbox实现全选功能
2020/11/17 Vue.js
python根据给定文件返回文件名和扩展名的方法
2015/03/27 Python
python使用代理ip访问网站的实例
2018/05/07 Python
python中的 zip函数详解及用法举例
2020/02/16 Python
Python collections模块的使用方法
2020/10/09 Python
selenium判断元素是否存在的两种方法小结
2020/12/07 Python
PPP协议组成及简述协议协商的基本过程
2015/05/28 面试题
数控专业毕业生自荐信范文
2014/03/04 职场文书
承租经营合作者协议书
2014/10/01 职场文书
检讨书1000字
2014/10/11 职场文书
端午节活动总结报告
2015/02/11 职场文书
世界遗产导游词
2015/02/13 职场文书
导游词400字
2015/02/13 职场文书
2015年行政助理工作总结
2015/04/30 职场文书
2015年乡镇残联工作总结
2015/05/13 职场文书
开业庆典致辞
2015/08/01 职场文书
实习报告怎么写
2019/06/20 职场文书
文案策划岗位个人自我评价(范文)
2019/08/08 职场文书
Android学习之BottomSheetDialog组件的使用
2022/06/21 Java/Android