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

有没有人知道如何禁用或操作(在大多数浏览器中) Dom 元素的虚线边框，如果它的焦点是 tabindex 顺序的话？

我想为一个聚焦元素构建自己的样式，但是最好使用现有的特性，因为使用 tabindex 可以将 keydown 事件绑定到 dom 元素。

85487 次浏览

小开

Using jQuery you can do

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

小开

最佳答案

Just make a CSS rule for the elements you want that have outline:none;

小开

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

小开

CSS trick:

:focus { outline: none; }

小开

a {
outline: 0;
}


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


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

小开

:focus state - Set the outline property to 0px solid transparent;

小开

With Firefox 53.0, if I disable the outline with one of the proposed solution, Firefox displays the default one.

However, if I use a blank color, it doesn't detect that the outline is hidden:

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

小开

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

Don't use CSS disable focus: http://outlinenone.com/ This use other users.

小开

Classic way is set outline to none:

outline: none;

However, it didn't work anymore on higher version browser or FireFox. This trick work for me:

outline: 0px solid transparent;

LOL. In future, if it detected transparent, then just replace with a little tiny higher transparent:

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

Some browsers, it was a boxshadow too:

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