Remove or disable focus border of browser via javascript

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

I want to build my own style for a focused element, but it would be great to use the existing feature, because with tabindex it is possible to bind keydown event to the dom-element.

Solution 1:

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

Solution 2:

CSS trick:

:focus { outline: none; }

Solution 3:

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);
}