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 object-fit属性
Jul 27 HTML / CSS
CSS3 实用技巧:实现黑白图像效果示例代码
Jul 11 HTML / CSS
一款纯css3实现的响应式导航
Oct 31 HTML / CSS
前端隐藏出边界内容的实现方法
Apr 14 HTML / CSS
CSS3实现时间轴效果
Jul 11 HTML / CSS
CSS3模拟动画下拉菜单效果
Apr 12 HTML / CSS
html5 touch事件实现触屏页面上下滑动(一)
Mar 10 HTML / CSS
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
Jan 30 HTML / CSS
html5定位获取当前位置并在百度地图上显示
Aug 22 HTML / CSS
html5实现完美兼容各大浏览器的播放器
Dec 26 HTML / CSS
详解如何用HTML5 Canvas API控制图片的缩放变换
Mar 22 HTML / CSS
CSS font-variation 可变字体的魅力(实例详解)
Mar 03 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
攻克CakePHP系列一 连接MySQL数据库
2008/10/22 PHP
谈谈新手如何学习PHP 默默经典版本
2009/08/04 PHP
thinkphp实现多语言功能(语言包)
2014/03/04 PHP
PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能
2015/04/27 PHP
php实现zip文件解压操作
2015/11/03 PHP
PHP5.2中PDO的简单使用方法
2016/03/25 PHP
PHP线程的内存回收问题
2016/07/08 PHP
php从数据库中读取特定的行(实例)
2017/06/02 PHP
jQuery判断复选框是否勾选的原理及示例
2014/05/21 Javascript
使用js画图之圆、弧、扇形
2015/01/12 Javascript
AngularJS 模型详细介绍及实例代码
2016/07/27 Javascript
Vue 短信验证码组件开发详解
2017/02/14 Javascript
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
2017/08/24 Javascript
JS库之ParticlesJS使用简介
2017/09/12 Javascript
基于Require.js使用方法(总结)
2017/10/26 Javascript
JS实现的简单分页功能示例
2018/08/23 Javascript
vue 循环加载数据并获取第一条记录的方法
2018/09/26 Javascript
微信小程序实现卡片左右滑动效果的示例代码
2019/05/01 Javascript
vue读取本地的excel文件并显示在网页上方法示例
2019/05/29 Javascript
Vue脚手架编写试卷页面功能
2020/03/17 Javascript
Vue3 响应式侦听与计算的实现
2020/11/11 Javascript
[50:28]LGD女子学院第三期 DOTA2复仇之魂教学
2013/12/24 DOTA
python实现中文输出的两种方法
2015/05/09 Python
Python实现采用进度条实时显示处理进度的方法
2017/12/19 Python
python3+PyQt5实现支持多线程的页面索引器应用程序
2018/04/20 Python
解决python3 HTMLTestRunner测试报告中文乱码的问题
2018/12/17 Python
python内置函数sorted()用法深入分析
2019/10/08 Python
Tensorflow: 从checkpoint文件中读取tensor方式
2020/02/10 Python
django-orm F对象的使用 按照两个字段的和,乘积排序实例
2020/05/18 Python
Pytorch 高效使用GPU的操作
2020/06/27 Python
详解python tkinter 图片插入问题
2020/09/03 Python
美国羽绒床上用品第一品牌:Pacific Coast
2018/08/25 全球购物
幼儿园中秋节活动方案
2014/02/06 职场文书
幼儿园三八妇女节活动方案
2014/03/11 职场文书
精彩的广告词
2014/03/19 职场文书
学习焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书