Remove the blue border (outline) in Chrome and dash border in Firefox (for Bootstrap 3)

Blue border in Google ChromeDash border in Mozilla Firefox

You may face this issue with anchor/link/input elements such as <a>, <button>, <input> show unexpected border when you clicked on the element, and how to remove it by CSS?

The solution is adding ?outline: none;? to the selector, for example,

a:focus {outline: none;}

Now when you clicked <a> on Firefox, the dashed border (outline) will not appear. But on Google Chrome still (if you?re using Bootstrap).

Then you have you add

!important;

after it, and for Google Chrome if you?re using Bootstrap and don?t edit it in the right way. (Overrule issue).

Then how to solve this?

In Bootstrap 3, there have a _mixins.scss/.sass file, go for it and looking for mixins named ?tab-focus()? and here is the code of its mixins,

// Webkit-style focus@mixin tab-focus() {// Defaultoutline: thin dotted;// Webkitoutline: 5px auto -webkit-focus-ring-color;outline-offset: -2px;}

Those lines are the default values of web browsers in both Chrome and Firefox. Now just delete those lines or comment it out, and replace it with outline: none; just like this,

@mixin tab-focus() {outline: none;}

So the conclusion is, you have to add !important; if you?re using Bootstrap 3 and can?t edit its mixin at the source code or edit its CSS. (But according to CSS standard, use !important; only with the thing that really important). But if you can edit it, then you should edit it at its source, do not overrule it.

The main solution is just adding outline: none; but be aware of user-agent and third-party framework that may overrule your code.

a:focus,button:focus,input:focus,textarea:focus {outline: none;}

And remember to define focus (:focus) styles for better accessibility.

You can find more info about outline and border here,

Outline on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/outline

:focus on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus