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?

回答1:

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

element { outline: none; }

回答2:

a { outline: none; }

回答3:

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

回答4:

this is more accurate:

a { outline: none!important; }

回答5:

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 }

回答6:

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

回答7:

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.

回答8:

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, ...

来源：https://stackoverflow.com/questions/4285970/css-firefox-how-to-deactivate-the-dotted-border-firefox-click-indicator