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 border-image使用说明
Jun 23 HTML / CSS
纯css3实现宠物小鸡实例代码
Oct 08 HTML / CSS
html5调用摄像头功能的实现代码
May 07 HTML / CSS
html5 学习简单的拾色器
Sep 03 HTML / CSS
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
Jan 30 HTML / CSS
html标签之Object和EMBED标签详解
Jul 04 HTML / CSS
html5跨域通讯之postMessage的用法总结
Nov 07 HTML / CSS
html5教程实现Photoshop渐变色效果
Dec 04 HTML / CSS
html5使用canvas实现跟随光标跳动的火焰效果
Jan 07 HTML / CSS
10个最常见的HTML5面试题 附答案
Jun 06 HTML / CSS
HTML5 localStorage使用总结
Feb 22 HTML / CSS
基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例
Jul 31 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
在PWS上安装PHP4.0正式版
2006/10/09 PHP
MongoDB在PHP中的常用操作小结
2014/02/20 PHP
YII路径的用法总结
2014/07/09 PHP
php实现每天自动变换随机问候语的方法
2015/05/12 PHP
thinkphp5引入公共部分header、footer的方法详解
2018/09/14 PHP
前后台交互过程中json格式如何解析以及如何生成
2012/12/26 Javascript
json的定义、标准格式及json字符串检验
2014/05/11 Javascript
JS实现一个按钮的方法
2015/02/05 Javascript
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
2015/03/12 Javascript
表单验证插件Validation应用的实例讲解
2015/10/10 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
2016/01/13 Javascript
在页面中输出当前客户端时间javascript实例代码
2016/03/02 Javascript
原生JS实现自定义滚动条效果
2020/10/27 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
2018/08/14 Javascript
LayerClose弹窗关闭刷新方法
2018/08/17 Javascript
微信小程序实现留言板功能
2018/11/02 Javascript
Angular刷新当前页面的实现方法
2018/11/21 Javascript
微信小程序开发的基本流程步骤
2019/01/31 Javascript
webpack打包html里面img后src为“[object Module]”问题
2019/12/22 Javascript
JS常见内存泄漏及解决方案解析
2020/05/30 Javascript
three.js如何实现3D动态文字效果
2021/03/03 Javascript
破解安装Pycharm的方法
2018/10/19 Python
Python匿名函数/排序函数/过滤函数/映射函数/递归/二分法
2019/06/05 Python
Django的Modelforms用法简介
2019/07/27 Python
通过实例了解Python str()和repr()的区别
2020/01/17 Python
韩国现代百货官网:Hmall
2018/03/21 全球购物
Windows和Linux动态库应用异同
2016/07/28 面试题
vue项目实现分页效果
2021/03/24 Vue.js
两年的个人工作自我评价
2014/01/10 职场文书
医药营销个人求职信范文
2014/02/07 职场文书
营销总监岗位职责范本
2014/02/26 职场文书
2015年教师节慰问信
2015/03/23 职场文书
幼儿园迎新生欢迎词
2015/09/30 职场文书
2019年冬至:天冷暖人心的问候祝福语大全
2019/12/20 职场文书
Mysql数据库按时间点恢复实战记录
2021/06/30 MySQL
postgresql中如何执行sql文件
2023/05/08 PostgreSQL