CSS Firefox - How to deactivate the dotted border ( firefox click indicator )?

This click indicator is a disgusting piece for my recent web projects.. I hate this! - How can I say开发者_运维百科 to my Firefox browser that he should not mark the clicked object?

Provided that your menu items are not input elements (say, buttons), you can hide it using CSS, like so:

element { outline: none; }

a { outline: none; }

Nothing helped (Firefox 20.1) until this:

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;
}

this is more accurate:

a { outline: none!important; }

To be more specific to @ioannis-karadimas, you could remove the outline on hover (assuming mouse input) but leave it for focus (assuming keyboard input). This would retain most of the accessibility. That being said:

element:hover { outline: none; }
element:focus { // leave the focus }

Based on this post, adding outline:0 will also do the trick.

.selector{ outline:0; }

If you don't want to have the border shown to any element in your website, try the following,

:focus { outline:none; }
::-moz-focus-inner { border:0; }

You might hate it, but your customers might not. Generally speaking overriding browser functionality is a great way to confuse users and inspire them not to visit your site.

Crazy solution:

input[type="button"]::-moz-focus-inner{
    border: 1px dotted transparent;
}

but I dislike it.

Indeed Firefox 12.0 is marking a dotted on input type="button" when I click it. outline:none does nothing for :active, :focus, ...