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

[Update] Diese Lösung funktioniert nicht mehr. Die Lösung, die bei mir funktioniert hat, ist diese https://stackoverflow.com/a/3844452/925560

Die als richtig markierte Antwort funktionierte nicht mit Firefox 24.0.

Um den gepunkteten Umriss von Firefox auf Schaltflächen und Anker-Tags zu entfernen, habe ich den folgenden Code hinzugefügt:

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,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: 0;
    outline : 0;
}

Ich habe die Lösung hier gefunden: http://aghoshb.com/articles/css-how-to-remove-firefoxs-dotted-outline-on-buttons-and-anchor-tags.html

Answer 2

Ich habe die meisten Antworten hier ausprobiert, aber keine davon hat mir geholfen. Als ich merkte, dass ich den blauen Umriss der Schaltflächen auch in Chrome loswerden muss, fand ich eine andere Lösung. Blauen Rahmen von der benutzerdefinierten CSS-Schaltfläche in Chrome entfernen

Dieser Code funktionierte bei mir mit Firefox Version 30 unter Windows 7. Vielleicht hilft er ja auch jemand anderem da draußen :)

button:focus {outline:0 !important;}

Answer 3

Dadurch wird die Reichweite kontrolliert:

:focus {
    outline:none;
}
::-moz-focus-inner {
    border:0;
}
input[type=range]::-moz-focus-outer {
    border: 0;
}

Von: Gepunktete Umrandung von Bereichseingabeelementen in Firefox entfernen

Answer 4

Es gibt viele Lösungen auf dem Web für diese gefunden, von denen viele funktionieren, aber dies zu erzwingen, so dass absolut nichts markieren / fokussieren kann einmal eine Verwendung der folgenden:

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

Das gibt ein bisschen mehr Sicherheit und besiegelt das Geschäft!

Answer 5

Es gibt keine Möglichkeit, diesen gepunkteten Fokus in Firefox mit CSS zu entfernen.

Wenn Sie Zugang zu den Computern haben, auf denen Ihre Webanwendung läuft, gehen Sie in Firefox zu about:config und setzen Sie browser.display.focus_ring_width auf 0 setzen, dann zeigt Firefox überhaupt keine gepunkteten Ränder mehr an.

Der folgende Fehler erklärt das Thema: https://bugzilla.mozilla.org/show_bug.cgi?id=74225