去除链接、按钮虚线框 | remove outline

去除虚线框的一些说明：

/*
 * 注意：由于我们的demo页面采用的noreset.css重置样式包含对虚线框的重置(代码如下)---点击时没有虚线框，但是聚焦状态是有的
 * 故本页面注释了noreset样式的引用，方便测试虚线框的情况！
 */

/*
 * Addresses `outline` inconsistency between Chrome and other browsers.
 */

a:focus {
    outline: thin dotted;
}

/*
 * Improves readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
    outline: 0;
}

从网页的易用性来考虑，链接的 outline 不要去除，推荐使用如上方法。简单列举为什么不要去除虚线框：

• 虚线框（outline）给键盘导航带来便利
• 导致更加糟糕的用户体验（令 JavsScript 的onfocus事件无用武之地）
• 可替代的选择方案（设置焦点被触发时，链接背景为红色等）

查看详细分析：页面的易用性：为什么不推荐去掉链接周围的虚线框

如果虚线框形状极其丑陋，严重影响外观、视觉效果，可以参考以下方法：

<a href="#" hidefocus="true">A outline:hidefocus</a>

/* hack for Firefox */
input[type=submit]::-moz-focus-inner,input[type=button]::-moz-focus-inner{
    border : 0px;
}

/* 不要随便去掉虚线框 */
input[type=submit]:focus, input[type=button]:focus{
    outline : none;
}

问题及注意事项：

IE 需要在标签中添加 hidefocus 属性，值可以为空，如：<input href="#" hidefocus value="确定" type="button" />，<a /> 标签同理。

关于潜规则、关于BUG

我能在用 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 须要去这个伪状态下的边框

更多：详见去除虚线框介绍

也可以用js这样添加

/* 去除虚线(部分元素) */
$(".no_focus").bind("focus",function(){
    //if(document.all){ //针对IE
    if(this.blur){
        this.blur(); //常用于幻灯的数字按钮
    };
});

问题

• IE下使用
• 关于热点链接的虚线框