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

Question

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

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

score 192 · Accepted Answer

192

只需为您想要的元素制定一个 CSS 规则outline:none;

于 2010-06-10T14:58:15.057 回答

score 41 · Accepted Answer

41

CSS技巧：

:focus { outline: none; }

于 2010-09-05T18:29:11.903 回答

score 5 · Accepted Answer

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

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

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

score 3 · Accepted Answer

3

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

于 2010-06-29T09:35:52.450 回答

score 2 · Accepted Answer

经典方式将大纲设置为无：

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;

score 1 · Accepted Answer

a {
outline: 0;
}

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

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

score 0 · Accepted Answer

0

:focus state- 将轮廓属性设置为 0px 实心透明；

于 2016-06-28T06:45:07.027 回答

score -3 · Accepted Answer

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

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

score -8 · Accepted Answer

-8

使用 jQuery 你可以做到

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

于 2010-06-10T14:52:39.497 回答

9 回答 9