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绘制出各种几何图形
Aug 17 HTML / CSS
css3个性化字体_动力节点Java学院整理
Jul 12 HTML / CSS
CSS3实现的文本3D效果附图
Sep 03 HTML / CSS
一款纯css3实现的非常实用的鼠标悬停特效演示
Nov 05 HTML / CSS
HTML+CSS3模拟心的跳动实例代码
Sep 05 HTML / CSS
HTML5中的nav标签学习笔记
Jun 24 HTML / CSS
HTML5 video视频字幕的使用和制作方法
May 03 HTML / CSS
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
Jan 06 HTML / CSS
很酷的HTML5电子书翻页动画特效
Feb 25 HTML / CSS
html svg生成环形进度条的实现方法
Sep 23 HTML / CSS
移动端HTML5开发神器之vconsole详解
Dec 15 HTML / CSS
html输入两个数实现加减乘除功能
Jul 01 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
yii2 modal弹窗之ActiveForm ajax表单异步验证
2016/06/13 PHP
php中错误处理操作实例分析
2019/08/23 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
常用js脚本
2006/12/03 Javascript
JavaScript 学习笔记(十二) dom
2010/01/21 Javascript
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
2012/01/15 Javascript
extjs tabpanel限制选项卡数量实现思路及代码
2013/04/02 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
2015/08/04 Javascript
谈谈JavaScript中function多重理解
2015/08/28 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
2015/12/19 Javascript
Javascript简写条件语句(推荐)
2016/06/12 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
2016/09/20 Javascript
jquery实现瀑布流效果 jquery下拉加载新数据
2016/12/12 Javascript
原生js实现倒计时--2018
2017/02/21 Javascript
JavaScript结合HTML DOM实现联动菜单
2017/04/05 Javascript
小程序转发探索示例
2019/02/19 Javascript
vue使用nprogress加载路由进度条的方法
2020/06/04 Javascript
JS绘图Flot如何实现动态可刷新曲线图
2020/10/16 Javascript
Python中MySQLdb和torndb模块对MySQL的断连问题处理
2015/11/09 Python
Python多线程爬虫实战_爬取糗事百科段子的实例
2017/12/15 Python
Django中使用haystack+whoosh实现搜索功能
2019/10/08 Python
Python print不能立即打印的解决方式
2020/02/19 Python
python新手学习可变和不可变对象
2020/06/11 Python
如何利用Python给自己的头像加一个小国旗(小月饼)
2020/10/02 Python
浏览器实现移动端高性能css3动画(开启gpu加速)
2013/12/23 HTML / CSS
HTML5之SVG 2D入门8—文档结构及相关元素总结
2013/01/30 HTML / CSS
大学生创业计划书的范文
2014/01/07 职场文书
学生周末回家住宿长期请假条
2014/02/15 职场文书
手工社团活动方案
2014/02/17 职场文书
市场营销大学生职业规划书
2014/02/25 职场文书
暑期培训随笔感言
2014/03/10 职场文书
干部鉴定材料
2014/05/18 职场文书
医药销售自荐书
2014/05/29 职场文书
Python获取江苏疫情实时数据及爬虫分析
2021/08/02 Python
Java如何实现通过键盘输入一个数组
2022/02/15 Java/Android
vue整合百度地图显示指定地点信息
2022/04/06 Vue.js