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样式linear-gradient的使用实例
Jan 16 HTML / CSS
CSS3教程(6):创建网站多列
Apr 02 HTML / CSS
Html5 audio标签样式的修改
Jan 28 HTML / CSS
如何利用input事件来监听移动端的输入
Apr 15 HTML / CSS
html5教你做炫酷的碎片式图片切换 (canvas)
Jul 28 HTML / CSS
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
Aug 18 HTML / CSS
详解android与HTML混合开发总结
Jun 06 HTML / CSS
HTML5 视频播放(video),JavaScript控制视频的实例代码
Oct 08 HTML / CSS
html+css实现分层金字塔的实例
Jun 02 HTML / CSS
CSS3 Tab动画实例之背景切换动态效果
Aug 23 HTML / CSS
分享CSS盒子模型隐藏的几种方式
Feb 28 HTML / CSS
CSS3实现指纹特效代码
Mar 17 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面向对象全攻略 (一) 面向对象基础知识
2009/09/30 PHP
整理的9个实用的PHP库简介和下载
2010/11/09 PHP
php中用socket模拟http中post或者get提交数据的示例代码
2013/08/08 PHP
Laravel用户授权系统的使用方法示例
2018/09/16 PHP
不用锚点也可以平滑滚动到页面的指定位置实现代码
2013/05/08 Javascript
js操作checkbox遇到的问题解决
2013/06/29 Javascript
JavaScript判断变量是否为空的自定义函数分享
2015/01/31 Javascript
javascript中Array数组的迭代方法实例分析
2015/02/04 Javascript
限制只能输入数字的实现代码
2016/05/16 Javascript
漂亮! js实现颜色渐变效果
2016/08/12 Javascript
Bootstrap基本插件学习笔记之按钮(21)
2016/12/08 Javascript
详解微信小程序 页面跳转 传递参数
2016/12/08 Javascript
微信小程序 欢迎页面的制作(源码下载)
2017/01/09 Javascript
JS实现的tab切换选项卡效果示例
2017/02/28 Javascript
Angular.Js之Scope作用域的学习教程
2017/04/27 Javascript
手把手搭建安装基于windows的Vue.js运行环境
2017/06/12 Javascript
bootstrap timepicker在angular中取值并转化为时间戳
2017/06/13 Javascript
基于jquery日历价格、库存等设置插件
2020/07/05 jQuery
简单介绍react redux的中间件的使用
2018/04/06 Javascript
Electron-vue脚手架改造vue项目的方法
2018/10/22 Javascript
全面分析JavaScript 继承
2019/05/30 Javascript
js实现点赞效果
2020/03/16 Javascript
用vue 实现手机触屏滑动功能
2020/05/28 Javascript
[06:59]DOTA2-DPC中国联赛3月7日Recap集锦
2021/03/11 DOTA
Python深入学习之对象的属性
2014/08/31 Python
Python编程使用NLTK进行自然语言处理详解
2017/11/16 Python
python爬虫之urllib库常用方法用法总结大全
2018/11/14 Python
Python使用sorted对字典的key或value排序
2018/11/15 Python
Python 、Pycharm、Anaconda三者的区别与联系、安装过程及注意事项
2019/10/11 Python
python自动分箱,计算woe,iv的实例代码
2019/11/22 Python
python连接mysql数据库并读取数据的实现
2020/09/25 Python
采用冷却技术的超自然舒适度:GhostBed床垫
2018/09/18 全球购物
大学生职业生涯规划书模版
2013/12/30 职场文书
户外宣传策划方案
2014/05/25 职场文书
事业单位个人总结
2015/02/12 职场文书
了解Redis常见应用场景
2021/06/23 Redis