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

Getestet auf Firefox 46 und Chrome 49 mit diesem Code.

input:focus, textarea:focus, button:focus {
    outline: none !important;
}

Vor (weiße Punkte sind sichtbar)

Nach ( Weiße Punkte sind unsichtbar )

Wenn Sie nur wenige Eingabefelder, Schaltflächen usw. verwenden möchten. Verwenden Sie den spezifischeren Code.

input[type=text] {
  outline: none !important;
}

Answer 2

Fügen Sie einfach dieses Css für die Auswahlbox hinzu

select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

Das funktioniert bei mir einwandfrei.

Answer 3

Ich denke, Sie sollten wirklich wissen, was Sie tun, wenn Sie den Fokusumriss entfernen, da dies die Tastaturnavigation und die Barrierefreiheit beeinträchtigen kann.

Wenn Sie es aufgrund eines Designproblems herausnehmen müssen, fügen Sie ein :focus Status für die Schaltfläche, der dies durch einen anderen visuellen Hinweis ersetzt, z. B. durch eine hellere Farbe des Rahmens oder Ähnliches.

Manchmal habe ich das Bedürfnis, den lästigen Umriss zu entfernen, aber ich bereite immer einen alternativen visuellen Anhaltspunkt vor.

Y nunca verwenden Sie die blur() js-Funktion. Verwenden Sie die ::-moz-focus-inner Pseudoklasse.

Answer 4

In den meisten Fällen wird ohne Hinzufügen der !important zum CSS-Code hinzufügen, wird es nicht funktionieren.

Vergessen Sie also nicht, Folgendes hinzuzufügen !important

a, a:active, a:focus{
    outline: none !important; /* Works in Firefox, Chrome, IE8 and above */
}

Oder jeder andere Code:

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

Answer 5

Mit dem folgenden CSS-Code lässt sich dies beheben:

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