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

Entfernen Sie die gepunktete Umrandung von Links, Schaltflächen und Eingabeelementen.

a:focus, a:active,
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
    border: 0;
    outline : 0;
}

Answer 2

Wenn Sie einen Rahmen auf einer Schaltfläche haben und die gepunktete Umrandung in Firefox ausblenden möchten sans Sie können den Rahmen (und damit die zusätzliche Breite auf der Schaltfläche) entfernen:

.button::-moz-focus-inner {
    border-color: transparent;
}

Answer 3

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

Wo button kann ein beliebiger CSS-Selektor sein, für den Sie das Verhalten deaktivieren möchten.

Answer 4

Vielleicht sollten Sie den Fokus eher verstärken, als ihn abzuschaffen.

button::-moz-focus-inner {border: 2px solid transparent;}

button:focus::-moz-focus-inner {border-color: blue}

Answer 5

Es sieht so aus, als wäre die einzige Möglichkeit, dies zu erreichen, die Einstellung

browser.display.focus_ring_width = 0

in about:config für jeden Browser einzeln.