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

507

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)

Edward Tanguay
quelle
2
Es scheint, als würden in Firefox 4 Elemente beim Klicken nicht mehr standardmäßig einen Umriss erhalten, sondern nur noch, wenn sie den Tastaturfokus erhalten.
Geert
1
Was Sie als "hässlich" bezeichnen, soll die Zugänglichkeit einer Website unterstützen. Benutzer nur über die Tastatur können beim Entfernen dieser Gliederung nicht mehr feststellen, welcher Teil der Website im Fokus steht. Ihre Website wäre völlig unzugänglich und dies sollte niemals der Fall sein. Entfernen Sie niemals den Umriss. Stylen Sie es besser nach Ihren Wünschen.
Markus Graf

Antworten:

787
button::-moz-focus-inner {
  border: 0;
}
Josh Crozier
quelle
15
Ja, es funktioniert auch bei mir! Wie kann es nun für ausgewählte Personen gemacht werden?
7wp
16
Beachten Sie, dass dies auch für die Eingabe funktioniert (z. B. Eingabe :: - Moz-Focus-Inner {Border: 0;})
El Yobo
15
Zweck des Doppelpunkts: (CSS3-Notation) evotech.net/blog/2007/05/…
Sholsinger
21
Dieser hat bei mir nicht funktioniert, weil bootstrap.css diese hässlichen gepunkteten Knöpfe gemacht hat. Stattdessen habe ich:focus {outline:none !important;}
machineaddict
5
: Fokus {Gliederung: keine;} :: - Moz-Fokus-innere {Grenze: 0;} wäre weniger spezifisch
Ben
311

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

Anderson Custódio
quelle
8
Danke, das hat bei mir funktioniert, als die richtige Antwort nicht stimmte. Ich muss den falschen Selektor verwendet haben.
irl_irl
Vielen Dank dafür. Wird dies auch bei Links und Schaltflächen entfernt?
Nathan
3
Dieser ist am besten! Die akzeptierte Antwort ist nur für <button>, nicht <a>noch<input>
Ron van der Heijden
2
Perfekt in Mozilla Firefox 30 unter Ubuntu (GNU / Linux).
E-Info128
4
Ich werde die Notiz über diese brechende Zugänglichkeit unterstützen. Es ist wichtig, sich daran zu erinnern, dass nicht jeder eine Maus benutzen oder sehen oder gut sehen kann. Das heißt, gemäß dem Link (und dem gesunden Menschenverstand), in dem die Gliederung ausgeblendet wird, wird sie nur dann unterbrochen, wenn sie fertig ist. Mit without ... an author-supplied visual focus indicatoranderen Worten, es ist in Ordnung, den User-Agent-Stil durch Ihren eigenen zu ersetzen, wie in OP erwähnt. Idealerweise sollte es kontrastreich sein.
Johncip
48

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; 
    }
Chinkchink
quelle
Sie benötigen keine Einheit für Zahlen, die Null sind. 0pxkann durch just0
slang
44

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!

Foxybagga
quelle
12
Sollte a { outline: none; }einfach für Links ausreichen.
Gewähren Sie
3
Hier hat das! Wichtige den Trick gemacht, die anderen Lösungen hatten das nicht und haben nicht funktioniert. für mich.
Cristiano Fontes
Aber oft sollten Sie a { outline: none; }mit !important->a { outline: none !important; }
joryl
24
:focus, :active {
    outline: 0;
    border: 0;
}
Blizzyx
quelle
Arbeitete wie ein Zauber für ein ausgewähltes Optionsfeld, das ich benutzte
Muhammad Ahsan
1
Dies war nicht spezifisch genug und ich wollte keine! Wichtigen oder nur zielgerichteten aElemente verwenden, also fand ich eine gute Option body :focus, body :active { outline: 0; border: 0; } ::-moz-focus-inner { border: 0; }
Ivan Durst
10

[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

Renato Carvalho
quelle
2
Es funktioniert nicht mehr: / Die Lösung, die funktioniert hat, ist diese stackoverflow.com/a/3844452/925560
Renato Carvalho
8

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;}
Vartox
quelle
Gleiches hier, dies ist die einzige Lösung, die an FF 38.0.5
OlivierH
6

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

Vitaly Sharovatov
quelle
Danke, dass es gut funktioniert, aber ich habe zuvor so viele Links erstellt, dass ich dieses Problem bis jetzt nie bekomme. aber jetzt bin ich verwirrt, also was ist der Grund vor der Gegenwart?
Durga Rao
Diese Antwort ist jetzt völlig falsch. Das Einstellen der ::-moz-focus-inner {border:0;}in mehreren anderen Antworten erwähnten Funktion funktioniert einwandfrei.
Andy Mercer
@AndyM Diese Antwort funktioniert. Die in anderen Antworten dargestellte Lösung ist für CSS und funktioniert nur für einzelne Sites.
Rahil Wazir
7
Die Frage fragt, wie es mit CSS gemacht werden kann, und die Antwort sagt, dass es nicht sein kann. Das ist falsch. Es kann sein.
Andy Mercer
6

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!

Shannon Hochkins
quelle
6

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

Bob
quelle
Keine andere Lösung funktioniert für range- danke :)
Kamil Kiełczewski
Perfekt, funktioniert auch in Firefox 72 unter Linux!
asdjfiasd
5

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)

Eingabe mit weißen Punkten

Nachher (Weiße Punkte sind unsichtbar) Geben Sie hier die Bildbeschreibung ein

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 !!

Madan Sapkota
quelle
Das !importantwurde für mich benötigt, um das Stylesheet von Firefox zu überschreiben. Prost!
SamHH
5

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.

Abhay Singh
quelle
4

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.

Nulllinie
quelle
4

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;
}
Herci
quelle
3
button::-moz-focus-inner { border: 0; }

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

gewellt
quelle
3

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} 
Jason Plank
quelle
2
@ Nathan ein wenig spät, aber wenn Sie keinen Stil im Fokuszustand haben, wird dies die Tastaturerfahrung beeinträchtigen. Sie können nicht wissen, worauf Sie sich konzentrieren, wenn Sie die Tabulatortaste drücken.
Hkan
@Hkan Ja, ich stimme zu. Die Gliederung von Firefox ist jedoch hässlich, insbesondere wenn es sich um einen benutzerdefinierten Fokusrand handelt.
Nathan
@ Nathan Ich stimme dem vollkommen zu. Was wir tun sollten, ist unser eigenes Styling für den Fokuszustand bereitzustellen, anstatt die Elemente in diesem Zustand gleich zu machen.
Hkan
3

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;
}
Fizer Khan
quelle
3

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;
}
Dave Everitt
quelle
3

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;
}
kurumkan
quelle
2

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.

AlexWilson
quelle
1

Dies funktioniert unter Firefox v-27.0

 .buttonClassName:focus {
  outline:none;
}
star18bit
quelle
1

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;}
Waqas Bukhary
quelle
Eigentlich (zumindest in Firefox 77) brauchen Sie nur: button:focus { outline: none !important } Oder wenn Sie mich nicht mögen! Wichtig, funktioniert dies auch, um das Firefox-Styling zu überschreiben: :root button:focus { outline: none }
Jonas Sandstedt
1

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.

Ehsan88
quelle
1

Ja, nicht verpassen ! Wichtig

button::-moz-focus-inner {
 border: 0 !important;
}
Riwaj Chalise
quelle
! wichtig ist hier nicht Teil der Antwort, und wenn Ihre App es benötigt, müssen Sie größere Probleme lösen als Highlights um Ihre Schaltflächen. Bemühen Sie sich immer zu vermeiden! Wichtig.
Monokrom
0

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

gewöhnlich
quelle