CSS+JS方法去除点击链接,按钮时出现的虚线框

如何去除虚线框

a:focus, input[type=button] ,input[type=submit] { outline:none; }
 
 

从这段代码来看，让我们小分析一下，有两点可能是需要我们注意的：

1. 去除不全面

   IE6/7 并不支持 outline 属性, firefox 下 input 的虚线并没有去除

2. 去除太多

   除 IE6/7 外的所有浏览器的按钮（firefox没去掉）和链接都被去掉虚线框

这是看起来矛盾的两个问题。其实不然，因为是两个现同性质的问题。从技术上，这个方法并不全面。从体验上，我想你也知道，我们只是去掉部分不需要的，去掉全部并不友好。所以，上面的写法个人并不推荐。

关于潜规则、关于BUG

Demo: 去虚线框 | remove outline

我能在用 TAB 键的时候不去掉虚线框吗？为什么我的 input 在 firefox 下没有成功去除虚线框？这些问题被提出的时候，困扰着不少人。因为这里面有潜规则。总结一下，看这个表：

去除的方式	生效的浏览器
outline:none	IE8 | Firefox | Webkit |Opera
hidefocus	IE
:focus{outline:none;}	IE8 | Firefox | Webkit | Opera
:active{outline:none;}	同上，但在tab的时候，IE将保留虚线框
::-moz-focus-inner{outline:none;}	Firefox 存着bug，input 须要去这个伪状态下的边框

好吧，不得不承认的是，这些小事，都还真是一门学问，我们要好好学习，好好积累。多用点心，把东西做得更好。

做前台开发时肯定会遇到使用button,a标签的时候，每次点击相关这些标签的时候，我们会经常看到有一个虚线框出现，从视觉效果来看，有虚线框会很刺眼，形象到用户浏览的视觉中心，所以我们有必要将这个刺眼的虚线框去掉。利用google和百度，整理一下相关的方法，方便以后开发当中使用。

<input id="" hidefocus=true type="button" οnfοcus="this.blur();" value="" />

方法一：使用css方法

1. a {blr:e­xpression(this.onFocus=this.blur())} /*for IE*/
2. a {outline:}/*for FireFox*/

IE浏览器下面还可以使用IE下的私有的html属性：hideFoucs，在标签的结构中加入hidefocus=”true”属性。即：

1. <a href="http://www.g.cn" hidefocus="true" title="谷歌">谷歌</a>

方法二：使用javascript方法：
通过javascript遍历页面Dom

1. window.onload=function()
2. {
3. for(var i=0; ii<document.links.length; ii++)
4. document.links$[$ii$]$.onfocus=function(){this.blur()}
5. }

Javascript封装为函数

1. function fHideFocus(tName){
2. aTag=document.getElementsByTagName(tName);
3. for(i=0;i<aTag.length;i++)aTag$[$i$]$.hideFocus=true;
4. //for(i=0;i<aTag.length;i++)aTag$[$i$]$.οnfοcus=function(){this.blur();};
5. }

当前是添加一个hidefocus的属性，注释掉的句子是添加οnfοcus=this.blur();
　　然后调用fHideFocus(”A”)，即可把a的虚线框去掉
　　通过传递不同的参数，可以去掉更多的虚线框，比如”BUTTON”可以去掉button的
　　但要记住参数要用大写字母