Firefox most-pain-in-the-ass-for-developers ‘feature’ it’s to put an outline dotted in grey in every link, button or input we focus (or click).
This could be easily solved using a simple CSS line using Mozilla’s own pseudo-selectors:
a::-moz-focus-inner { border: 0;outline:0 }
That’s it. And be careful: there are two colons not just one. That works for links, but you can make it to every tag Firefox implements like buttons or input button or submit.
It may work just with ‘
outline: 0;
‘ but it’s been reported of this working bad with old versions of Firefox.
input::-moz-focus-inner { border: 0;outline:0 } // for all inputs
input[type=button]::-moz-focus-inner { border: 0;outline:0 } // for input tag type button
input[type=submit]::-moz-focus-inner { border: 0;outline:0 } // for input tag type submit
button::-moz-focus-inner { border: 0;outline:0 } // for button tag
Or you can just apply when it’s on focus:
input:focus::-moz-focus-inner { border: 0;outline:0 } // for all inputs on focus
