Wie kann man die gepunktete Umrandung von BUTTONS und Links in Firefox entfernen?

Question

Ich kann Firefox dazu bringen, die hässlichen gepunkteten Fokusumrisse auf Links damit:

a:focus { 
    outline: none; 
}

Aber wie kann ich das tun für <button> Tags auch? Wenn ich das tue:

button:focus { 
    outline: none; 
}

die Schaltflächen haben immer noch den gepunkteten Fokusumriss, wenn ich auf sie klicke.

(und ja, ich weiß, dass dies ein Problem der Benutzerfreundlichkeit ist, aber ich würde gerne meine eigenen, dem Design angemessenen Fokus-Hinweise anstelle der hässlichen grauen Punkte geben)

Answer 1

Zusammen mit Bootstrap 3 habe ich diesen Code verwendet. Der zweite Satz von Regeln nur rückgängig machen was Bootstrap für Fokus/aktive Schaltflächen tut:

button::-moz-focus-inner {
  border: 0;    /*removes dotted lines around buttons*/
}

.btn.active.focus, .btn.active:focus, .btn.focus, .btn.focus:active, .btn:active:focus, .btn:focus{
  outline:0;
}

Beachten Sie, dass Ihre benutzerdefinierte css-Datei nach der Bootstrap css-Datei in Ihrem HTML-Code kommen sollte, um sie zu überschreiben.

Answer 2

Nachdem ich viele der oben genannten Optionen ausprobiert hatte, funktionierte bei mir nur die folgende.

*:focus, *:visited, *:active, *:hover  { outline:0 !important;}
*::-moz-focus-inner {border:0;}

Answer 3

Dies funktioniert auf Firefox v-27.0

 .buttonClassName:focus {
  outline:none;
}

Answer 4

Ja, verpassen Sie nicht !important

button::-moz-focus-inner {
 border: 0 !important;
}

Answer 5

Sie können versuchen button::-moz-focus-inner {border: 0px solid transparent;} in Ihrem CSS.