Remove or disable focus border of browser via javascript
JavascriptHtmlCssTabindexJavascript Problem Overview
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.
Javascript Solutions
Solution 1 - Javascript
Just make a CSS rule for the elements you want that have outline:none;
Solution 2 - Javascript
CSS trick:
:focus { outline: none; }
Solution 3 - Javascript
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);
}
Solution 4 - Javascript
input::-moz-focus-inner { border: 0; }
Solution 5 - Javascript
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;
Solution 6 - Javascript
a {
outline: 0;
}
a: hover,
a: active,
a: focus {
outline: none;
}
input::-moz-focus-inner {
border: 0;
}
Solution 7 - Javascript
:focus state - Set the outline property to 0px solid transparent;
Solution 8 - Javascript
$(function() {
$('a').click(function() { $(this).blur(); });
$('input').click(function() { $(this).blur(); });
});
Don't use CSS disable focus: http://outlinenone.com/ This use other users.
Solution 9 - Javascript
Using jQuery you can do
$("#nav li a").focus(function(){
$(this).blur();
});