Tips to remove dotted border on Firefox

It goes without saying that Firefox is one of the best browsers I have ever used. I love it! However, there is a small build in bug that irritate me all the time until I find a way to fix it.

What I am referring to here is the dotted outlines that appear around the link and disappear when user click anything else in the page.

As I encountered this problem and brought me trouble, I would like to share a small trick that can get around it very easily.

This trick can completely remove it from your Firefox’s default behavior by editing the CSS that controls the user interface.

Put the following codes in your Cascading Style Sheet in your theme:

a:focus, 
a:active,
button,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner  { 
    outline:none !important;
}