Wie entferne ich die gepunkteten Umrisse von Firefox auf TASTEN sowie Links?

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

a:focus { 
    outline: none; 
}

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

button:focus { 
    outline: none; 
}

Die Schaltflächen haben immer noch den gepunkteten Fokusumriss, wenn ich darauf klicke.

(und ja, ich weiß, dass dies ein Usability-Problem ist, aber ich möchte meine eigenen Fokus-Hinweise geben, die für das Design geeignet sind, anstatt hässliche graue Punkte)

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

Sie müssen keinen Selektor 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

Wenn Sie lieber CSS verwenden, um den gepunkteten Umriss zu entfernen:

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

Das Folgende hat bei LINKS für mich funktioniert und ich dachte an das Teilen - falls jemand interessiert ist.

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

Prost!

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

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

Die als korrekt gekennzeichnete Antwort funktionierte mit Firefox 24.0 nicht.

Um den gepunkteten Umriss von Firefox auf Schaltflächen und Ankertags 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

Versuchte die meisten Antworten hier, aber keine von ihnen funktionierte für mich. Als ich merkte, dass ich auch die blauen Umrisse der Schaltflächen in Chrome entfernen muss, fand ich eine andere Lösung.Entfernen Sie den blauen Rand von der benutzerdefinierten CSS-Schaltfläche in Chrome

Dieser Code funktionierte für mich unter Firefox Version 30 unter Windows 7. Vielleicht hilft er jemand anderem da draußen :)

button:focus {outline:0 !important;}

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

Wenn Sie Zugriff auf die Computer haben, auf denen Ihre Webanwendung funktioniert, gehen Sie zu ungefähr: config in Firefox und legen Sie fest browser.display.focus_ring_width auf 0. Dann zeigt Firefox überhaupt keine gepunkteten Ränder an.

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

Es gibt viele Lösungen im Web dafür, von denen viele funktionieren, aber um dies zu erzwingen, so dass absolut nichts hervorheben / fokussieren kann, wenn eine Verwendung Folgendes verwendet:

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

Dies fügt nur ein bisschen mehr Sicherheit hinzu und besiegelt den Deal!

Dies erhält die Bereichskontrolle:

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

Von: Entfernen Sie gepunktete Umrisse vom Bereichseingabeelement in Firefox

Getestet auf Firefox 46 und Chrome 49 mit diesem Code.

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

Vorher (weiße Punkte sind sichtbar)

Nachher (Weiße Punkte sind unsichtbar)

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

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

Viel Spaß beim Codieren !!

Fügen Sie einfach dieses CSS für das Auswahlfeld hinzu

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

Das funktioniert gut für mich.

Ich denke, Sie sollten wirklich wissen, was Sie tun, indem Sie die Fokuskontur entfernen, da dies die Tastaturnavigation und die Zugänglichkeit beeinträchtigen kann.

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

Manchmal habe ich das Bedürfnis, diesen nervigen Umriss herauszunehmen, aber ich bereite immer einen visuellen Hinweis mit alternativem Fokus vor.

Und verwenden Sie niemals die blur()js-Funktion. Verwenden Sie die ::-moz-focus-innerPseudoklasse.

In den meisten Fällen !importantfunktioniert es ohne Hinzufügen zum CSS-Code nicht.

Vergessen Sie also nicht hinzuzufügen !important

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

Oder irgendein anderer Code:

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

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

Wo buttonkann sich die CSS-Auswahl befinden, für die Sie das Verhalten deaktivieren möchten?

Vielleicht möchten Sie den Fokus verstärken, anstatt ihn loszuwerden.

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

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

Entfernen Sie gepunktete Umrisse 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;
}

Wenn Sie einen Rand auf einer Schaltfläche haben und den gepunkteten Umriss in Firefox ausblenden möchten, ohne den Rand zu entfernen (und daher die zusätzliche Breite auf der Schaltfläche), können Sie Folgendes verwenden:

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

Der folgende CSS-Code entfernt dies:

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

Es sieht so aus, als ob der einzige Weg, dies zu erreichen, das Einstellen ist

browser.display.focus_ring_width = 0

in about: config pro Browser.

Dies funktioniert unter Firefox v-27.0

 .buttonClassName:focus {
  outline:none;
}

Nachdem ich viele der oben genannten Optionen ausprobiert hatte, funktionierte nur Folgendes für mich.

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

Zusammen mit Bootstrap 3 habe ich diesen Code verwendet. Das zweite Regelwerk macht nur rückgängig, was Bootstrap für Fokus- / Aktiv-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;
}

HINWEIS: Ihre benutzerdefinierte CSS-Datei sollte nach der Bootstrap-CSS-Datei in Ihrem HTML-Code stehen, um sie zu überschreiben.

Ja, nicht verpassen ! Wichtig

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

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