Ich arbeite an einer Webseite und möchte benutzerdefinierte <button>
Tags. Also sagte ich mit CSS : border: none
. Jetzt funktioniert es perfekt in Safari, aber in Chrom, wenn ich auf eine der Schaltflächen klicke, wird ein nerviger blauer Rand darum gelegt. Ich dachte button:active { outline: none }
oder button:focus { outline:none }
würde arbeiten, aber auch nicht. Irgendwelche Ideen?
So sieht es aus, bevor es angeklickt wird (und wie es nach dem Klicken noch aussehen soll):
Und das ist die Grenze, von der ich spreche:
Hier ist mein CSS:
button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}
button.launch:hover {
cursor: pointer;
background-color: #FABD44;
}
button.change {
background-color: #F88F00;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}
button.change:hover {
cursor: pointer;
background-color: #F89900;
}
button:active {
outline: none;
border: none;
}
css
google-chrome
eshellborn
quelle
quelle
outline: none
so ein, es sei denn, Sie sind bereit, den Verlust der Zugänglichkeit zu ersetzen. Siehe diese Website: Outlininenone.comAntworten:
Dies wird nicht empfohlen, da dies die Zugänglichkeit Ihrer Website beeinträchtigt. Weitere Informationen finden Sie in diesem Beitrag .
Das heißt, wenn Sie darauf bestehen, sollte dieses CSS funktionieren:
Probieren Sie es aus oder JSFiddle: http://jsfiddle.net/u4pXu/
Oder in diesem Ausschnitt:
quelle
outline: none;
oder spielt das keine Rolle?button:focus{ outline-color: #A75000 }
... anstatt den Indikator auszublenden, ändern Sie ihn in ein dunkles Orange, das zum Stil passt.Warten! Es gibt einen Grund für diesen hässlichen Umriss!
Bevor Sie diesen hässlichen blauen Umriss entfernen, sollten Sie die Barrierefreiheit berücksichtigen. Standardmäßig wird dieser blaue Umriss auf fokussierbaren Elementen platziert. Auf diese Weise können Benutzer mit Eingabehilfen diese Schaltfläche fokussieren, indem sie darauf tippen. Einige Benutzer verfügen nicht über die motorischen Fähigkeiten, um eine Maus zu verwenden, und müssen nur die Tastatur (oder ein anderes Eingabegerät) für die Computerinteraktion verwenden. Wenn Sie den blauen Umriss entfernen, gibt es keine visuelle Anzeige mehr dafür, welches Element fokussiert ist. Wenn Sie den blauen Umriss entfernen möchten, sollten Sie ihn durch eine andere Art der visuellen Anzeige ersetzen, dass die Schaltfläche fokussiert ist.
Mögliche Lösung: Verdunkeln Sie die Tasten, wenn Sie fokussiert sind
In den folgenden Beispielen wurde der blaue Umriss von Chrome zunächst mithilfe von entfernt
button:focus { outline:0 !important; }
Hier sind Ihre grundlegenden Bootstrap-Schaltflächen, wie sie normalerweise angezeigt werden:
Hier sind die Schaltflächen, wenn sie den Fokus erhalten:
Hier die Tasten, wenn sie gedrückt werden:
Wie Sie sehen können, sind die Tasten etwas dunkler, wenn sie scharfgestellt werden. Persönlich würde ich empfehlen, die fokussierten Tasten noch dunkler zu machen, damit ein sehr deutlicher Unterschied zwischen dem fokussierten Zustand und dem normalen Zustand der Taste besteht.
Es ist nicht nur für behinderte Benutzer
Die Verbesserung des Zugriffs auf Ihre Website wird häufig übersehen, kann jedoch zu einer produktiveren Nutzung Ihrer Website beitragen. Es gibt viele normale Benutzer, die Tastaturbefehle verwenden, um durch Websites zu navigieren, damit die Hände auf der Tastatur bleiben.
quelle
Ich entferne einfach die Gliederung von allen Tags auf der Seite, indem ich alle auswähle und Gliederung anwende: keine auf alles :)
Wie bereits erwähnt, müssen Sie möglicherweise auch! Important hinzufügen, damit der Stil folgendermaßen aussieht:
quelle
In meinem Fall dieses Problems musste ich angeben
box-shadow: none
quelle
box-shadow
Vergessen Sie nicht die
!important
Erklärung für ein besseres ErgebnisEine Regel mit der Eigenschaft! Important wird immer angewendet, unabhängig davon, wo diese Regel im CSS-Dokument angezeigt wird.
quelle
outline:0 !important
ist es eine schlechte UX- und schlechte Entwicklungspraxis, jeden Hinweis auf die Fokusposition mit Nuk zu versehen. Wenn Sie dies tun, stellen Sie bitte sicher, dass Sie etwas anderes tun, um die Fokusposition anzuzeigen (z. B. das Ändern der Hintergrundfarbe des Elements).Das Entfernen
outline
ist für die Zugänglichkeit schrecklich! Im Idealfall wird der Fokusring nur angezeigt, wenn der Benutzer die Tastatur verwenden möchte .Verwendung : Fokus sichtbar . Es handelt sich derzeit um einen W3C-Vorschlag zur Gestaltung des Nur-Tastatur-Fokus mithilfe von CSS und wird in Firefox ( caniuse ) unterstützt. Bis andere große Browser dies unterstützen, können Sie diese robuste Polyfüllung verwenden .
Ich habe auch einen ausführlicheren Beitrag geschrieben, falls Sie weitere Informationen benötigen.
quelle
outline
als solche, solange das: Fokus - Zustand deutlich sichtbar über andere Mittel hergestellt ist, wieborder,
background-color
,box-shadow
etc.:-moz-focusring
, aber im Gegensatz zu den Aussagen der Dokumente wird nicht zwischen Klick- und Tab-Fokus unterschieden. In Chrome müssen Sie ab sofort bestimmte Flags aktivieren, damit es funktioniertFügen Sie dies in Ihre CSS-Datei ein.
quelle
Verwenden Sie entweder Folgendes:
oder dies, wenn das nicht funktioniert:
Das funktioniert bei mir (zumindest FF und Chrome). Anstatt auf den
:focus
Status zu zielen , zielen Sie einfach auf den:active
Status. Dadurch wird die ästhetisch aufdringliche Hervorhebung in Ihrem Browser entfernt, wenn ein Benutzer auf einen Link klickt. Die Fokuszustände bleiben jedoch erhalten, wenn ein Benutzer mit Behinderungen Registerkarten oder Umschalttabellen durch eine Seite führt. Beide Parteien freuen sich. :) :)quelle
für dieses Problem:
benutze das:
Ergebnis:
quelle
Für alle, die Bootstrap verwenden und dieses Problem haben, verwenden sie: active: focus sowie just: active und: focus, sodass Sie Folgendes benötigen:
Hoffentlich hat jemand etwas Zeit gespart, um das herauszufinden, und mir ein bisschen den Kopf geschlagen, um mich zu fragen, warum so eine einfache Sache nicht funktioniert hat.
quelle
Die meisten Lösungen funktionieren nicht, wenn Sie Bootstrap 4.1 und möglicherweise andere Versionen verwenden. Nach langem Kopfschlagen stellte ich fest, dass Sie die Klasse shadow-none anwenden müssen :
quelle
Das hat bei mir funktioniert:
quelle
Das Update für Chrome und andere Browser
quelle
Versuchen Sie diesen Code für alle Elemente mit blauem Rand
oder
quelle
Eine andere Möglichkeit , das hier noch nicht erwähnte Problem der Barrierefreiheit zu lösen , ist ein wenig Javascript . Credits gehen an diesen aufschlussreichen Blogpost von Hackernoon: https://hackernoon.com/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2
Der Ansatz hier ist sehr einfach und dennoch effektiv: Hinzufügen einer Klasse, wenn Benutzer die Tabulatortaste zum Navigieren auf der Seite verwenden (und optional entfernen, wenn Sie erneut zur Maus wechseln). Mit dieser Klasse können Sie entweder eine Fokuskontur anzeigen oder nicht .
quelle
Ich hatte das gleiche Problem und benutzte einfaches CSS-
quelle
Wenn Sie denselben Effekt in der Eingabe löschen möchten, können Sie den folgenden Code sowie die folgende Schaltfläche hinzufügen.
quelle
Bis alle modernen Browser CSS-Selector unterstützen : Fokus sichtbar , besteht
die einfachste und möglicherweise beste Möglichkeit, die Barrierefreiheit zu speichern , darin, diesen kniffligen Fokus nur für Mausbenutzer zu entfernen und für Tastaturbenutzer zu speichern :
1.Verwenden Sie diese winzige Polyfüllung (ca. 10 KB ): https://github.com/WICG/focus-visible
2. Fügen Sie den nächsten Code irgendwo in Ihrem CSS hinzu:
Browser-Unterstützung von css4-selector: Fokus sichtbar momentan sehr schwach:
https://caniuse.com/#search=focus-visible
quelle
Einfach schreiben
outline:none;
. Kein Pseudoelement erforderlichfocus
quelle
Dies ist ein Problem in der Chrome-Familie und war schon immer da.
Es wurde ein Fehler gemeldet: https://bugs.chromium.org/p/chromium/issues/detail?id=904208
Es kann hier angezeigt werden: https://codepen.io/anon/pen/Jedvwj , sobald Sie einen Rand zu etwas hinzufügen, das einer Schaltfläche ähnelt (z. B. role = "button" wurde beispielsweise zu einem Tag hinzugefügt). Chrome bringt es durcheinander und legt den Fokusstatus fest, wenn Sie mit der Maus klicken.
Ich empfehle dringend, dieses Update zu verwenden: https://github.com/wicg/focus-visible .
Gehen Sie einfach wie folgt vor
Fügen Sie das Skript zu Ihrem HTML hinzu:
oder importieren Sie in Ihre Haupteintragsdatei, wenn Sie Webpack oder ähnliches verwenden:
Dann legen Sie dies in Ihre CSS-Datei:
Sie können einfach einstellen:
Wenn Sie jedoch eine große Anzahl von Benutzern haben, benachteiligen Sie diejenigen, die keine Mäuse verwenden können, oder diejenigen, die nur ihre Tastatur aus Geschwindigkeitsgründen verwenden möchten.
quelle
Ich hatte das gleiche Problem mit Bootstrap. Ich löste sowohl mit Umriss als auch mit Kastenschatten
quelle