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 相关文章推荐
分享8款纯CSS3实现的搜索框功能
Sep 14 HTML / CSS
CSS3 transition 实现通知消息轮播条
Oct 14 HTML / CSS
CSS实现进度条和订单进度条的示例
Nov 05 HTML / CSS
HTML+CSS3+JS 实现的下拉菜单
Nov 25 HTML / CSS
HTML5的video标签的浏览器兼容性增强方案分享
May 19 HTML / CSS
HTML5实现QQ聊天气泡效果
Jun 26 HTML / CSS
HTML5的结构和语义(1):前言
Oct 17 HTML / CSS
关于HTML5你必须知道的28个新特性,新技巧以及新技术
May 28 HTML / CSS
使用HTML5中的contentEditable来将多行文本自动增高
Mar 01 HTML / CSS
多视角3D可旋转的HTML5 Logo动画
Mar 02 HTML / CSS
常用的HTML5列表标签
Jun 20 HTML / CSS
微信小程序“圣诞帽”的实现思路详解
Dec 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
php读取3389的脚本
2014/05/06 PHP
php站内搜索关键词变亮的实现方法
2014/12/30 PHP
PHP的Yii框架入门使用教程
2016/02/15 PHP
mac系统下安装多个php并自由切换的方法详解
2017/04/21 PHP
Laravel推荐使用的十个辅助函数
2019/05/10 PHP
通过DOM脚本去设置样式信息
2010/09/19 Javascript
c#和Javascript操作同一json对象的实现代码
2012/01/17 Javascript
JQuery异步加载无限下拉框级联功能实现示例
2014/02/19 Javascript
AngularJS入门教程之过滤器详解
2016/08/19 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
2016/09/20 Javascript
Bootstrap作品展示站点实战项目2
2016/10/14 Javascript
基于jQuery实现左侧菜单栏可折叠功能
2016/12/27 Javascript
超简单的Vue.js环境搭建教程
2017/03/17 Javascript
Vue项目webpack打包部署到服务器的实例详解
2017/07/17 Javascript
vue页面加载闪烁问题的解决方法
2018/03/28 Javascript
微信小程序仿RadioGroup改变样式的处理方案
2018/07/13 Javascript
vue设置一开始进入的页面教程
2019/10/28 Javascript
[03:42]2014DOTA2西雅图国际邀请赛 Navi战队巡礼
2014/07/07 DOTA
Python中使用SAX解析xml实例
2014/11/21 Python
实例解析Python设计模式编程之桥接模式的运用
2016/03/02 Python
python递归查询菜单并转换成json实例
2017/03/27 Python
python检测主机的连通性并记录到文件的实例
2018/06/21 Python
浅析Python 字符编码与文件处理
2020/09/24 Python
html5贪吃蛇游戏使用63行代码完美实现
2013/06/25 HTML / CSS
高中生期末评语大全
2014/01/28 职场文书
哈弗商学院毕业生求职信
2014/02/26 职场文书
幼儿园老师寄语
2014/04/03 职场文书
网络优化专员求职信
2014/05/04 职场文书
英语教研活动总结
2014/07/02 职场文书
中秋晚会活动方案
2014/08/31 职场文书
社区党务工作总结2015
2015/05/19 职场文书
冰雪公主观后感
2015/06/16 职场文书
追悼词范文大全
2015/06/23 职场文书
教师研修随笔感言
2015/11/18 职场文书
学校2016年九九重阳节活动总结
2016/04/01 职场文书
Redis基本数据类型List常用操作命令
2022/06/01 Redis