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

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

Answer 2

Es ist nicht notwendig, einen Selektor zu definieren.

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

Dies verstößt jedoch gegen die Best Practices für Barrierefreiheit des W3C. Die Gliederung soll denjenigen helfen, die mit Tastaturen navigieren.

https://www.w3.org/TR/WCAG20-TECHS/F78.html#F78-examples

Answer 3

Wenn Sie es vorziehen, CSS zu verwenden, um die gepunktete Umrandung loszuwerden:

/*for FireFox*/
    input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner
    {   
        border : 0;
    } 
/*for IE8 and below */
    input[type="submit"]:focus, input[type="button"]:focus
    {     
        outline : none; 
    }

Answer 4

Das untenstehende funktionierte bei mir im Falle von LINKS, ich dachte, ich teile es - falls jemand interessiert ist.

a, a:visited, a:focus, a:active, a:hover{
    outline:0 none !important;
}

Zum Wohl!

Answer 5

:focus, :active {
    outline: 0;
    border: 0;
}