Whenever I click on an anchor in Mobile Firefox, it draws a blue border around the <a>, which persists after the anchor has been clicked. Here is a screenshot of how this looks:
In order to remove this border, I have tried adding the following to my CSS, to no effect:
a {-moz-user-select: none;}
a:link { outline:none; }
a:visited { outline:none; }
a:hover { outline:none; }
a:active { outline:none; }
a:focus { outline:none; }
I have also tried adding the following snippet to my JavaScript on DOM ready, also to no effect:
$("a").live('click',function(event) {
if (document.selection)
document.selection.empty();
else if (window.getSelection)
window.getSelection().removeAllRanges();
});
Is this blue border styleable? How can I get rid of it?
Minimal Test Case (example)
Here is a reduced example of a page that manifests this behavior:
<!DOCTYPE html><a href="#foo">Test</a>
Rendering
