通过javascript删除或禁用浏览器的焦点边框答案

【问题标题】：Remove or disable focus border of browser via javascript通过javascript删除或禁用浏览器的焦点边框
【发布时间】：2011-03-02 05:26:15
【问题描述】：

如果 dom 元素的焦点在 tabindex 顺序中，是否有人知道如何禁用或操作（在大多数浏览器中）虚线边框？

我想为焦点元素构建自己的样式，但使用现有功能会很棒，因为使用 tabindex 可以将 keydown 事件绑定到 dom 元素。

【问题讨论】：

【解决方案1】：

只需为您想要的具有outline:none; 的元素创建一个 CSS 规则

【讨论】：

【解决方案2】：

CSS 技巧：

:focus { outline: none; }

【讨论】：

【解决方案3】：

对于 Firefox 53.0，如果我使用建议的解决方案之一禁用大纲，Firefox 会显示默认的。

但是，如果我使用空白颜色，它不会检测到轮廓被隐藏：

input:focus{
   outline: 1px solid rgba(255,255,255,1);
}

【讨论】：

【解决方案4】：

input::-moz-focus-inner { border: 0; }

【讨论】：

【解决方案5】：

经典方式设置大纲为无：

outline: none;

但是，它在更高版本的浏览器或 FireFox 上不再工作。这个技巧对我有用：

outline: 0px solid transparent;

哈哈。以后如果检测到透明，就换成稍微高一点的透明：

outline: 0px solid rgba(0,0,0,0.001);

一些浏览器，它也是一个boxshadow：

outline:none !important;
outline-width: 0 !important;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;

【讨论】：

【解决方案6】：

a {
outline: 0;
}

a: hover,
a: active,
a: focus {
     outline: none;
}

input::-moz-focus-inner {
border: 0;
}

【讨论】：

【解决方案7】：

:focus state - 将outline property 设置为 0px 实心透明；

【讨论】：

【解决方案8】：

$(function() {
     $('a').click(function() { $(this).blur(); });
     $('input').click(function() { $(this).blur(); });
});

不要使用 CSS 禁用焦点：http://outlinenone.com/ 这使用其他用户。

【讨论】：

【解决方案9】：

使用jQuery你可以做到

$("#nav li a").focus(function(){
  $(this).blur();
});

【讨论】：