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)
Antworten:
quelle
:focus {outline:none !important;}
Sie müssen keinen Selektor definieren.
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
quelle
<button>
, nicht<a>
noch<input>
without ... an author-supplied visual focus indicator
anderen Worten, es ist in Ordnung, den User-Agent-Stil durch Ihren eigenen zu ersetzen, wie in OP erwähnt. Idealerweise sollte es kontrastreich sein.Wenn Sie lieber CSS verwenden, um den gepunkteten Umriss zu entfernen:
quelle
0px
kann durch just0
Das Folgende hat bei LINKS für mich funktioniert und ich dachte an das Teilen - falls jemand interessiert ist.
Prost!
quelle
a { outline: none; }
einfach für Links ausreichen.a { outline: none; }
mit!important
->a { outline: none !important; }
quelle
a
Elemente verwenden, also fand ich eine gute Optionbody :focus, body :active { outline: 0; border: 0; }
::-moz-focus-inner { 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:
Ich habe die Lösung hier gefunden: http://aghoshb.com/articles/css-how-to-remove-firefoxs-dotted-outline-on-buttons-and-anchor-tags.html
quelle
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 :)
quelle
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
quelle
::-moz-focus-inner {border:0;}
in mehreren anderen Antworten erwähnten Funktion funktioniert einwandfrei.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:
Dies fügt nur ein bisschen mehr Sicherheit hinzu und besiegelt den Deal!
quelle
Dies erhält die Bereichskontrolle:
Von: Entfernen Sie gepunktete Umrisse vom Bereichseingabeelement in Firefox
quelle
range
- danke :)Getestet auf Firefox 46 und Chrome 49 mit diesem Code.
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.
Viel Spaß beim Codieren !!
quelle
!important
wurde für mich benötigt, um das Stylesheet von Firefox zu überschreiben. Prost!Fügen Sie einfach dieses CSS für das Auswahlfeld hinzu
Das funktioniert gut für mich.
quelle
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-inner
Pseudoklasse.quelle
In den meisten Fällen
!important
funktioniert es ohne Hinzufügen zum CSS-Code nicht.Vergessen Sie also nicht hinzuzufügen
!important
Oder irgendein anderer Code:
quelle
Wo
button
kann sich die CSS-Auswahl befinden, für die Sie das Verhalten deaktivieren möchten?quelle
Vielleicht möchten Sie den Fokus verstärken, anstatt ihn loszuwerden.
quelle
Entfernen Sie gepunktete Umrisse von Links, Schaltflächen und Eingabeelementen.
quelle
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:
quelle
Der folgende CSS-Code entfernt dies:
quelle
Es sieht so aus, als ob der einzige Weg, dies zu erreichen, das Einstellen ist
in about: config pro Browser.
quelle
Dies funktioniert unter Firefox v-27.0
quelle
Nachdem ich viele der oben genannten Optionen ausprobiert hatte, funktionierte nur Folgendes für mich.
quelle
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 }
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:
HINWEIS: Ihre benutzerdefinierte CSS-Datei sollte nach der Bootstrap-CSS-Datei in Ihrem HTML-Code stehen, um sie zu überschreiben.
quelle
Ja, nicht verpassen ! Wichtig
quelle
Sie können es
button::-moz-focus-inner {border: 0px solid transparent;}
in Ihrem CSS versuchen .quelle