Removing or disabling browser focus border through javascript

Question

Does anyone know how to disable or process (in most browsers) the dashed border of a dom element if it has focus in tabindex order?

I want to create my own style for a focused element, but it would be great to use an existing function, because with tabindex you can bind the keydown event to the dom element.

Answer 1

Just create a CSS rule for the elements you want to have outline:none;

Answer 2

CSS trick:

 :focus { outline: none; } 

Answer 3

 a { outline: 0; } a: hover, a: active, a: focus { outline: none; } input::-moz-focus-inner { border: 0; } 

Answer 4

With Firefox 53.0, if I disable the scheme with one of the suggested solutions, Firefox will display by default.

However, if I use an empty color, it does not detect that the outline is hidden:

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

Answer 5

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

Answer 6

:focus state - set the contour property to transparent 0px;

Answer 7

Using jQuery you can do

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