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制作倾斜导航条和毛玻璃效果
Sep 12 HTML / CSS
css3 box-shadow阴影(外阴影与外发光)图示讲解
Aug 11 HTML / CSS
CSS3中Color的一些特性介绍
May 27 HTML / CSS
利用SVG和CSS3来实现一个炫酷的边框动画
Jul 22 HTML / CSS
Css3新特性应用之形状总结
Dec 08 HTML / CSS
HTML5的video标签的浏览器兼容性增强方案分享
May 19 HTML / CSS
html5指南-1.html5全局属性(html5 global attributes)深入理解
Jan 07 HTML / CSS
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
Apr 08 HTML / CSS
基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码
Dec 20 HTML / CSS
HTML5中外部浏览器唤起微信分享功能的代码
Sep 15 HTML / CSS
HTML5 drag和drop具体使用详解
Jan 18 HTML / CSS
CSS 实现多彩、智能的阴影效果
May 12 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默认安装产生系统漏洞
2006/10/09 PHP
关于PHP递归算法和应用方法介绍
2013/04/15 PHP
PHP观察者模式实例分析【对比JS观察者模式】
2019/05/22 PHP
javascript 单选框,多选框美化代码
2008/08/01 Javascript
javascript 系统文件夹文件操作及参数介绍
2013/01/08 Javascript
js随机颜色代码的多种实现方式
2013/04/23 Javascript
Jquery动态进行图片缩略的原理及实现
2013/08/13 Javascript
js脚本获取webform服务器控件的方法
2014/05/16 Javascript
js使用for循环与innerHTML获取选中tr下td值
2014/09/26 Javascript
常用的js验证和数据处理总结
2016/08/02 Javascript
Node.js中使用jQuery的做法
2016/08/17 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
2019/05/10 Javascript
js实现for循环跳过undefined值示例
2019/07/02 Javascript
Javascript原生ajax请求代码实例
2020/02/20 Javascript
编写自定义的Django模板加载器的简单示例
2015/07/21 Python
python爬取w3shcool的JQuery课程并且保存到本地
2017/04/06 Python
python selenium UI自动化解决验证码的4种方法
2018/01/05 Python
python3写的简单本地文件上传服务器实例
2018/06/04 Python
PyQt5实现让QScrollArea支持鼠标拖动的操作方法
2019/06/19 Python
在 Jupyter 中重新导入特定的 Python 文件(场景分析)
2019/10/27 Python
基于Tensorflow一维卷积用法详解
2020/05/22 Python
如何学习Python time模块
2020/06/03 Python
python设置表格边框的具体方法
2020/07/17 Python
简单的命令查看安装的python版本号
2020/08/28 Python
Django执行源生mysql语句实现过程解析
2020/11/12 Python
Python使用struct处理二进制(pack和unpack用法)
2020/11/12 Python
pytorch 计算Parameter和FLOP的操作
2021/03/04 Python
css3绘制天猫logo实现代码
2012/11/06 HTML / CSS
CSS3实现可爱的小黄人动画
2016/07/11 HTML / CSS
HTML5中的autofocus(自动聚焦)属性介绍
2014/04/23 HTML / CSS
波兰运动鞋网上商店:e-Sporting
2018/02/16 全球购物
什么是组件架构
2016/05/15 面试题
一道输出判断型Java面试题
2014/10/01 面试题
支部书记四风对照材料
2014/08/28 职场文书
房产销售员2015年终工作总结
2015/10/22 职场文书
Golang数据类型和相互转换
2022/04/12 Golang