Firefox gepunkteter Umriss auf Knöpfe sowie Links Wie entfernen?

Question

kann ich Firefox nicht der hässliche gepunktete Fokus angezeigt werden skizziert auf Links mit dieser:

a:focus { 
    outline: none; 
}

Aber wie kann ich tun dies für <button>-Tags als auch? Wenn ich dies tun:

button:focus { 
    outline: none; 
}

die Tasten haben immer noch den gepunkteten Fokus Umriss, wenn ich auf sie klicken.

(und ja, ich weiß, das ist ein Usability-Problem, aber ich möchte meine eigenen Fokus Hinweise schaffen, die auf das Design angemessen sind statt hässlich graue Punkte)

Answer 1

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

Answer 2

Keine Notwendigkeit, einen Selektor zu definieren.

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

Allerdings verstößt diese Zugänglichkeit Best Practices aus dem W3C. Der Umriss ist es diejenigen, die Navigation mit Tastaturen zu helfen.

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

Answer 3

Wenn Sie es vorziehen, CSS zu verwenden, die Beseitigung des gepunkteten Umrisses zu bekommen:

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

Answer 4

Die unten für mich gearbeitet bei LINKS, Gedanken des Teilens - falls jemand interessiert ist.

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

Cheers!

Answer 5

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

Answer 6

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

Die Antwort markiert als richtig nicht mit Firefox 24.0 nicht funktioniert.

Firefox gepunkteten Umriss auf Buttons und Anker-Tags Ich habe den Code unten 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,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: 0;
    outline : 0;
}

fand ich die Lösung hier: http://aghoshb.com/articles/css-how-to-remove-firefoxs-dotted-outline-on-buttons-and-anchor-tags.html

Answer 7

die meisten Antworten versucht hier, aber keiner von ihnen arbeitete für mich. Als ich merkte, dass ich auch auf Schaltflächen auf Chrome, um loszuwerden, die blauen Kontur habe, fand ich eine andere Lösung. entfernen blaue Grenze von CSS Custom-Stil-Button in Chrome

Dieser Code funktioniert für mich auf Firefox Version 30 auf Windows 7. Vielleicht könnte es jemand anderes da draußen helfen:)

button:focus {outline:0 !important;}

Answer 8

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

Wenn Sie den Zugriff auf den Computer haben, wo Ihre Webapplikation funktioniert, gehen Sie zu:. Config in Firefox und setzen browser.display.focus_ring_width auf 0. Dann wird Firefox zeigen keine punktierten Grenzen überhaupt

In den folgenden Fehler erklären das Thema: https://bugzilla.mozilla.org/ show_bug.cgi? id = 74225

Answer 9

Es gibt viele Lösungen im Internet zu diesem, von denen viele Arbeit, aber diese zu zwingen, so dass absolut nichts hervorheben / Fokus einmal eine Anwendung wie folgt vor:

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

Das kommt noch hinzu, dass wenig zusätzliche Sicherheit und dichtet den Deal!

Answer 10

Getestet auf Firefox 46 und Chrome 49 mit diesem Code.

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

Vor (weißen Punkte sichtbar sind)

Nach (Weißen Punkte sind unsichtbar)

Wenn Sie nur auf wenige Eingabefelder anwenden möchten, Knöpfe usw. Verwenden Sie den spezifischeren Code.

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

Happy Coding !!

Answer 11

In den meisten Fällen ohne Zugabe von der !important in den CSS-Code, wird es nicht funktionieren.

Also, vergessen Sie nicht !important

hinzufügen

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

Oder jeder anderer Code:

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

Answer 12

Fügen Sie einfach diesen CSS für Auswahlbox

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

Dies funktioniert gut für mich.

Answer 13

Es sieht aus wie der einzige Weg, dies zu erreichen ist, indem

browser.display.focus_ring_width = 0

in etwa:. Config auf einer pro-Browser Basis

Answer 14

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

Wo button kann sein, was CSS-Selektor für die Sie das Verhalten deaktivieren möchten.

Answer 15

Sie können den Fokus intensivieren wollen, anstatt es loszuwerden.

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

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

Answer 16

Ich denke, Sie sollten wirklich wissen, was Sie durch Entfernen der Fokus Umriss tun, denn es kann es vermasseln für Tastaturnavigation und Zugänglichkeit.

Wenn Sie benötigen, um sich aus wegen eines Design Problem, fügen Sie einen :focus Zustand auf den Knopf, der diese mit einem anderen visuellen Hinweis ersetzt, wie die Änderung der Grenze zu einer helleren Farbe oder so ähnlich.

Manchmal fühle ich die Notwendigkeit, dass lästige Umriss herausnehmen, aber ich habe immer einen alternativen Fokus visuellen Hinweis vorzubereiten.

und nie Mit der Funktion js blur(). Verwenden Sie die ::-moz-focus-inner Pseudo-Klasse.

Answer 17

Entfernen gepunkteten Umriss von Links, Knopf und Eingabeelement.

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

Answer 18

Wenn Sie eine Grenze auf einem Knopf und wollen den gepunkteten Umriss in Firefox ohne verstecken, die Grenze zu entfernen (und somit ist es zusätzliche Breite auf der Schaltfläche) können Sie:

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

Answer 19

Der CSS-Code unten funktioniert diese zu 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,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: 0;
    outline : 0;
}

Answer 20

Damit wird der Bereich Kontrolle bekommen:

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

Von: entfernen gepunktetem Umriss von Bereich Eingabeelement in Firefox

Answer 21

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

Answer 22

Dies funktioniert auf Firefox v-27.0

 .buttonClassName:focus {
  outline:none;
}

Answer 23

Nach vielen Optionen aus der oben versuchen, nur die für mich gearbeitet folgen.

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

Answer 24

Zusammen mit Bootstrap 3 habe ich diesen Code. Der zweite Satz von Regeln nur Rückgängig was Bootstrap tut für Fokus / aktiv 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 dem Bootstrap CSS-Datei in Ihrem HTML-Code kommen sollte es außer Kraft zu setzen.

Answer 25

Yep nicht verpassen ! Important

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