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实现3D旋转书本效果
Mar 21 HTML / CSS
css3 线性渐变和径向渐变示例附图
Apr 08 HTML / CSS
纯CSS3实现的8种Loading动画效果
Jul 05 HTML / CSS
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
Jul 08 HTML / CSS
CSS3 实现倒计时效果
Nov 25 HTML / CSS
HTML5混合开发二维码扫描以及调用本地摄像头
Dec 27 HTML / CSS
HTML5之SVG 2D入门4—笔画与填充
Jan 30 HTML / CSS
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
Jan 30 HTML / CSS
html5 worker 实例(二) 图片变换效果
Jun 24 HTML / CSS
HTML5+CSS3模仿优酷视频截图功能示例
Jan 05 HTML / CSS
iphoneX 适配客户端H5页面的方法教程
Dec 08 HTML / CSS
HTML5 图片悬停放大的实现代码示例
Dec 04 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
星际中的相关伤害
2020/03/04 星际争霸
VML绘图板②脚本--VMLgraph.js、XMLtool.js
2006/10/09 PHP
php查询ip所在地的方法
2014/12/05 PHP
PHP中通过trigger_error触发PHP错误示例
2015/06/23 PHP
Yii2 rbac权限控制之rule教程详解
2016/06/23 PHP
php批量删除操作(数据访问)
2017/05/23 PHP
超强的IE背景图片闪烁(抖动)的解决办法
2007/09/09 Javascript
javascript 学习之旅 (2)
2009/02/05 Javascript
jquery学习笔记二 实现可编辑的表格
2010/04/09 Javascript
js检测iframe是否加载完成的方法
2015/11/26 Javascript
jQuery实现二级下拉菜单效果
2016/01/05 Javascript
jquery自定义表单验证插件
2016/10/12 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
2016/11/24 Javascript
jQuery内容筛选选择器实例代码
2017/02/06 Javascript
获取当前按钮或者html的ID名称实例(推荐)
2017/06/23 Javascript
jquery实现的简单轮播图功能【适合新手】
2018/08/17 jQuery
JS中判断字符串存在和非空的方法
2018/09/12 Javascript
layui-laydate时间日历控件使用方法详解
2018/11/15 Javascript
JavaScript中的this妙用实例分析
2020/05/09 Javascript
你不知道的SpringBoot与Vue部署解决方案
2020/11/09 Javascript
Python列表(list)、字典(dict)、字符串(string)基本操作小结
2014/11/28 Python
python Django框架实现自定义表单提交
2016/03/25 Python
对python中xlsx,csv以及json文件的相互转化方法详解
2018/12/25 Python
python获取当前文件路径以及父文件路径的方法
2019/07/10 Python
详解Selenium+PhantomJS+python简单实现爬虫的功能
2019/07/14 Python
Python使用pyyaml模块处理yaml数据
2020/04/14 Python
施华洛世奇西班牙官网:SWAROVSKI西班牙
2019/06/06 全球购物
初中生期末考试的自我评价
2013/12/17 职场文书
高中生物教学反思
2014/02/05 职场文书
服务宗旨标语
2014/07/01 职场文书
新员工试用期自我评价
2015/03/10 职场文书
四十年同学聚会致辞
2015/07/28 职场文书
八年级语文教学反思
2016/03/03 职场文书
导游词之无锡唐城
2019/12/12 职场文书
详解Java实践之适配器模式
2021/06/18 Java/Android
MySQL限制查询和数据排序介绍
2022/03/25 MySQL