it-swarm-eu.dev

So entfernen Sie Firefox gepunktete Umrisse auf Tasten sowie Links?

Ich kann Firefox nicht dazu bringen, die hässlichen gepunkteten Fokuskonturen anzuzeigen links mit diesem:

a:focus { 
    outline: none; 
}

Aber wie kann ich das für <button> Tags auch? 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)

465
Edward Tanguay
button::-moz-focus-inner {
  border: 0;
}
699
user27656

Es muss kein Selektor definiert werden.

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

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

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

285

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 : 0px;
    } 
/*for IE8 */
    input[type="submit"]:focus, input[type="button"]:focus
    {     
        outline : none; 
    }
46
chinkchink

Das Folgende funktionierte für mich im Falle von LINKS, dachte an Teilen - falls jemand interessiert ist.

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

Prost!

42
foxybagga
:focus, :active {
    outline: 0;
    border: 0;
}
22
blizzyx

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

Die als richtig markierte Antwort hat mit Firefox 24.0 nicht funktioniert.

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

9
Renato Carvalho

Versuchte die meisten Antworten hier, aber keine von ihnen funktionierte für mich. Als ich feststellte, dass ich den blauen Umriss der Schaltflächen auf Chrome= ebenfalls entfernen muss, habe ich eine andere Lösung gefunden. Entfernen des blauen Rahmens von den benutzerdefinierten CSS-Schaltflächen in Chrome =

Dieser Code hat bei mir in Firefox Version 30 unter Windows 7 funktioniert. Vielleicht hilft er jemand anderem :)

button:focus {outline:0 !important;}
7
Vartox

Es gibt viele Lösungen im Web, von denen viele funktionieren, aber um dies zu erzwingen, kann absolut nichts hervorheben/fokussieren, wenn Sie Folgendes verwenden:

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

Dies gibt nur ein bisschen mehr Sicherheit und besiegelt den Deal!

5

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 ausgeführt wird, gehen Sie zu about: config in Firefox und legen Sie browser.display.focus_ring_width bis 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

5

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

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

Das funktioniert gut für mich.

4
Abhay Singh

Getestet unter Firefox 46 und Chrome 49 mit diesem Code.

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

Vorher (weiße Punkte sind sichtbar)

input with white dots

Nach (Weiße Punkte sind unsichtbar) enter image description here

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

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

Happy Coding !!

4
Madan Sapkota

In den meisten Fällen ohne das Hinzufügen von !important auf den CSS-Code, es wird nicht funktionieren.

Vergessen Sie also nicht, !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;
}
3
herci

Möglicherweise 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} 
2
John

Wenn Sie einen Rahmen auf einer Schaltfläche haben und die gepunktete Kontur in Firefox ausblenden möchten ohne Entfernen des Rahmens (und damit der zusätzlichen Breite auf der Schaltfläche), können Sie Folgendes verwenden:

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

Der einzige Weg, dies zu erreichen, scheint die Einstellung zu sein

browser.display.focus_ring_width = 0

in about: config auf Browserbasis.

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

Dabei kann button der CSS-Selektor sein, für den Sie das Verhalten deaktivieren möchten.

2
wavded

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 entfernen müssen, fügen Sie der Schaltfläche einen :focus - 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 herauszuarbeiten, aber ich bereite immer einen alternativen visuellen Fokus vor.

Und nie benutze die Funktion blur() js. Verwenden Sie die Pseudoklasse ::-moz-focus-inner.

2
Flatline

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

Gepunktete Konturen von Links, Schaltflächen und Eingabeelementen entfernen.

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

Dies wird die Reichweitensteuerung erhalten:

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

Von: Gepunkteten Umriss aus Bereichseingabeelement in Firefox entfernen

2
bob

Ja nicht verpassen ! Wichtig

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

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

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

Du kannst es versuchen button::-moz-focus-inner {border: 0px solid transparent;} in Ihrem CSS.

0
usual

Dies funktioniert auf Firefox V-27.0

 .buttonClassName:focus {
  outline:none;
}
0
star18bit

Zusammen mit Bootstrap 3 habe ich diesen Code verwendet. Der zweite Regelsatz macht nur rückgängig, was bootstrap für Fokus/aktive Tasten:

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, dass Ihre benutzerdefinierte CSS-Datei nach Bootstrap CSS-Datei in Ihrem HTML-Code kommen sollte, um es zu überschreiben.

0
Ehsan88