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

Question

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

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

Answer 1

只需为您想要的具有 outline:none; 的元素制定 CSS 规则即可

Answer 2

CSS技巧：

:focus { outline: none; }

Answer 3

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

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

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

Answer 4

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

Answer 5

经典方式是将outline设置为none：

outline: none;

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

outline: 0px solid transparent;

哈哈。将来，如果它检测到透明，则只需替换为稍微高一点的透明度：

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

某些浏览器，它也是一个盒子阴影：

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

Answer 6

a {
outline: 0;
}

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

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

Answer 7

:focus state - 将轮廓属性设置为0px纯透明;

Answer 8

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

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

Answer 9

使用 jQuery 你可以做

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