Remove Blue Outlines from Links in Chrome & Firefox
Are you getting blue borders around links, inputs, or buttons in the Chrome browser? Or a dotted border in Firefox browsers?
To fix this, you'll need to add the
outline: none;style to a
:focusselector for any element that shows the problem.
Here's some CSS that will remove any blue borders around elements that are in a focused state:
Adding that CSS code should fix most of your issues in both Firefox and Chrome. The
:focusselector by itself will apply that style to all elements in its jurisdiction.
If you still notice problems in Firefox, you can use the
::-moz-focus-innerselector to fix any dotted blue lines. Here is what the code looks like:
To really cover your bases, we suggest that you put the code below in your base CSS file that applies to your whole project:
This will remove any blue outlines across all the HTML elements on your site!
Hopefully, this was helpful and fixed your issue! And as always, happy coding!