Entfernen Sie den blauen Rand von der benutzerdefinierten CSS-Schaltfläche in Chrome

811

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:

Geben Sie hier die Bildbeschreibung ein

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;
}
eshellborn
quelle
1
Sieht für mich ok aus? jsbin.com/oSAdovun/1/edit
davidpauljunior
Ich bin nicht sicher, warum es in Ihrer Demo funktioniert. Es macht es hier: jsfiddle.net/NgL8H @davidpauljunior
eshellborn
5
Ich habe die Fokusregel
davidpauljunior
21
Sie sollten den Umriss nicht vollständig entfernen - Personen mit Behinderungen - und Personen wie ich, die die Tastatur häufig verwenden, weil sie schnell ist - benötigen sie zum Navigieren. Es wäre viel besser, den Umriss an etwas anzupassen, das Ihnen gefällt.
Chris B
3
Bitte stellen Sie dies nicht outline: noneso ein, es sei denn, Sie sind bereit, den Verlust der Zugänglichkeit zu ersetzen. Siehe diese Website: Outlininenone.com
Flimm

Antworten:

1536

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:

button:focus {outline:0;}

Probieren Sie es aus oder JSFiddle: http://jsfiddle.net/u4pXu/

Oder in diesem Ausschnitt:

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

button:focus {outline:0;}
<button class="launch">Launch with these ads</button> 
<button class="change">Change</button>

Ronen Cypis
quelle
49
Sollte das nicht tatsächlich sein outline: none;oder spielt das keine Rolle?
Henrywright
2
@henrywright Nun, das OP hat das versucht und nicht für ihn gearbeitet.
Diosney
58
Bitte mach das niemals. Ihre geringfügige Beschwerde ist irrelevant für das massive Problem der Zugänglichkeit, das dies wird
Phazei
20
Sie sollten dies definitiv neu stylen, anstatt es vollständig zu verbergen. Versuchen Sie in diesem Fall etwas wie button:focus{ outline-color: #A75000 }... anstatt den Indikator auszublenden, ändern Sie ihn in ein dunkles Orange, das zum Stil passt.
Cloudworks
3
@ SeanO'Brien räumte ein, dass die gegebene Situation des OP möglicherweise für eine Site gilt, die 5 Benutzer hat, die alle in der Lage sind, Körper zu haben. Aber wahrscheinlich ist die Mehrheit der 1123 Personen, die dies befürwortet haben, der Meinung, dass dies der richtige Weg ist, um Dinge für ihre gegebene Situation zu tun, aber tatsächlich ist es nicht so diskriminierend.
Alexrogers
296

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: Bootstrap-Schaltflächen im Normalzustand

Hier sind die Schaltflächen, wenn sie den Fokus erhalten: Bootstrap-Schaltflächen im fokussierten Zustand

Hier die Tasten, wenn sie gedrückt werden: Geben Sie hier die Bildbeschreibung ein

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.

Nathan
quelle
40
Das Problem ist, dass es in Chrome sogar beim Klicken und nicht nur beim Tabulieren auftritt (die logische Implementierung, die in den meisten Browsern zu finden ist). Tatsächlich reduziert Google die Barrierefreiheit, da die meisten Entwickler dies einfach deaktivieren (in Chrome). Mehr Zeitverschwendung bei der Recherche / Behebung von Problemen im Zusammenhang mit Google / Chrome (Speichern von Passwörtern, E-Mail-CSS-Unterstützung, dies)
RunLoop
3
Du hast recht! Um die Barrierefreiheit beim Entfernen von Gliederungen zu berücksichtigen, benötigen Sie ein wenig JavaScript: paciellogroup.com/blog/2012/04/…
mems
Sie können einen Kommentar nicht einmal so formatieren, wie Sie eine Antwort geben können. Es ist schwierig, auf dieser Detailebene nur über einen Kommentar Feedback zu geben.
A-Dubb
@RunLoop Wie entfernst oder änderst du den blauen Rand nach dem Klick? Kann es über CSS gemacht werden oder ist Javascript erforderlich?
Nick
Menschen mit diesen Problemen können einfach vimium-ff
yukashima huksay
60

Ich entferne einfach die Gliederung von allen Tags auf der Seite, indem ich alle auswähle und Gliederung anwende: keine auf alles :)

*:focus {outline:none}

Wie bereits erwähnt, müssen Sie möglicherweise auch! Important hinzufügen, damit der Stil folgendermaßen aussieht:

*:focus {outline:none !important}
Mike
quelle
6
Bitte mach das nicht. Benutzer, die mit der Tastatur auf Ihrer Seite navigieren, können das aktuell fokussierte Element nicht sehen. Verwischen Sie das Element, anstatt den Umriss auszublenden, wenn das Klickereignis von einer Maus stammt.
Joepio
Grundsätzlich gibt es sicher noch ein anderes Fokus-Styling ...
Arziel
46

In meinem Fall dieses Problems musste ich angeben box-shadow: none

button:focus {
  outline:none;
  box-shadow: none;
}
antonkronaj
quelle
4
Danke für deinen Beitrag! Die "Box-Shadow" -Eigenschaft war in meinem Fall der Punkt.
Nightking
1
Dies war das gleiche Problem für mich. Nicht, dass es relevant wäre, aber ich habe Roots 'Sage Theme in Chrome unter Ubuntu 17.10 verwendet.
Spencer Hill
1
Nur das funktionierte nachbox-shadow
sura2k
1
Ich musste hinzufügen! Wichtig, damit es funktioniert, wahrscheinlich hat Bootstrap irgendwo eine spezifische Definition dafür
webMan
1
Das hat bei mir geklappt, Kumpel!, danke für die Veröffentlichung der Lösung. prost
theITvideos
44

Vergessen Sie nicht die !importantErklärung für ein besseres Ergebnis

button:focus {outline:0 !important;}

Eine Regel mit der Eigenschaft! Important wird immer angewendet, unabhängig davon, wo diese Regel im CSS-Dokument angezeigt wird.

Scabbia
quelle
14
"für ein besseres Ergebnis"? Können Sie erklären, was! Wichtig macht?
Popnoodles
5
Aber können Sie erklären, was es tut? "Aus dem Grund, warum es existiert" erklärt Menschen, die den Grund nicht kennen, nicht, warum es existiert.
Popnoodles
48
! wichtig sollte selten verwendet werden und nur um sicherzustellen, dass etwas nicht durch nachfolgende Regeln überschrieben wird. Sie sollten Ihre Elemente mit dem richtigen Selektor ausrichten, wenn Sie vorherige Regeln überschreiben.
Popnoodles
24
Die Verwendung von! Important ist selten gerechtfertigt. Sie sollten Ihre CSS-Selektoren immer sinnvoller gestalten und nicht verwenden! Wichtig, nur weil Sie dadurch ein "besseres Ergebnis" erzielen.
Ronen Cypis
5
Bitte tu das nicht. Während dies technisch gesehen die Frage des OP beantwortet, outline:0 !importantist 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).
Cloudworks
26

Das Entfernen outlineist 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 .

/* Remove outline for non-keyboard :focus */
*:focus:not(.focus-visible) {
  outline: none;
}

/* Optional: Customize .focus-visible */
.focus-visible {
  outline-color: lightgreen;
}

Ich habe auch einen ausführlicheren Beitrag geschrieben, falls Sie weitere Informationen benötigen.

Aaron Noel De Leon
quelle
1
Wohlgemerkt, AFAIK es braucht nicht zu sein outlineals solche, solange das: Fokus - Zustand deutlich sichtbar über andere Mittel hergestellt ist, wie border, background-color, box-shadowetc.
Már Örlygsson
2
Beste Antwort! Ihr Beitrag ist eine Lektüre wert (und ich schaue mir jetzt den Rest Ihres Blogs an 😅). Das fokussichtbare npm-Paket ist genau dort, wo es sich gerade befindet.
FelDev
1
Dies ist definitiv die beste Lösung. Mit nur wenigen Codezeilen habe ich diesen lästigen blauen Rand beim Klicken entfernt, während ich ihn weiterhin auf der Tastatur verwendet habe. Vielen Dank!
Pesta
1
Sind diese Daten korrekt? Diese Auswahl scheint in Chrome unterstützt zu werden, nicht in Firefox. developer.mozilla.org/en-US/docs/Web/CSS/…
Kevin Suttle
Es scheint, dass in Firefox der Selektor aufgerufen wird :-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 funktioniert
phil294
12

Fügen Sie dies in Ihre CSS-Datei ein.

*{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}
Roo
quelle
3
Vielen Dank. hat funktioniert, aber MDN sagt: Diese Funktion ist nicht Standard und befindet sich nicht auf einer Standardspur. Verwenden Sie es nicht auf Produktionsstandorten mit Blick auf das Web: Es funktioniert nicht für jeden Benutzer. Es kann auch große Inkompatibilitäten zwischen Implementierungen geben, und das Verhalten kann sich in Zukunft ändern.
Behnam Mohammadi
8

Verwenden Sie entweder Folgendes:

:active {
    outline:none;
}

oder dies, wenn das nicht funktioniert:

:active {
   outline:none !important;
}

Das funktioniert bei mir (zumindest FF und Chrome). Anstatt auf den :focusStatus zu zielen , zielen Sie einfach auf den :activeStatus. 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. :) :)

chuk
quelle
4
Warum meine Antwort bearbeiten, wenn Sie meine minimierte Version nur durch denselben Code ersetzen, der jedoch erweitert wurde? Das hat es für die Benutzer nicht besser geklärt. Bekommst du dafür Antwortguthaben oder so? LOL ...
Chuk
3
Bei solchen StackExchange-Websites geht es darum, Antworten zu haben, die jedem, der sie liest, das Verständnis erleichtern. Zu diesem Zweck ist eine Antwort mit knappem, minimiertem Code nicht so hilfreich wie lesbar formatierter Code. Das Verbessern von Antworten durch bessere Lesbarkeit ist ein normaler Weg, um die Website für alle zu verbessern.
Bignose
7

für dieses Problem:

Geben Sie hier die Bildbeschreibung ein

benutze das:

   *{
         -webkit-tap-highlight-color: rgba(0,0,0,0);
         -webkit-tap-highlight-color: transparent; /* For some Androids */
    }

Ergebnis:

Geben Sie hier die Bildbeschreibung ein

Behnam Mohammadi
quelle
7

Für alle, die Bootstrap verwenden und dieses Problem haben, verwenden sie: active: focus sowie just: active und: focus, sodass Sie Folgendes benötigen:

element:active:focus {
    outline: 0;
}

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.

Für immer Nomade
quelle
6

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 :

<button class="btn shadow-none">Bootstrap (4.1) button without shadow</button>
ATL_DEV
quelle
4

Das hat bei mir funktioniert:

button:focus {
    box-shadow:none;
}
Rob Myrick
quelle
4

Das Update für Chrome und andere Browser

button:focus { outline: none !important; box-shadow: none !important; }
Chronomer
quelle
3

Versuchen Sie diesen Code für alle Elemente mit blauem Rand

*{
outline: none;
}

oder

*{
outline-style: none;
}
Santosh Khalse
quelle
3

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 .

function handleFirstTab(e) {
    if (e.keyCode === 9) { // the "I am a keyboard user" key
        document.body.classList.add('user-is-tabbing');
        window.removeEventListener('keydown', handleFirstTab);
    }
}

window.addEventListener('keydown', handleFirstTab);
Tobija Fischer
quelle
3

Ich hatte das gleiche Problem und benutzte einfaches CSS-

.custom-button {
    outline: none
}
Apurv Thakur
quelle
2

Wenn Sie denselben Effekt in der Eingabe löschen möchten, können Sie den folgenden Code sowie die folgende Schaltfläche hinzufügen.

input:focus {outline:0;}
aaayumi
quelle
2

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:

.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

Browser-Unterstützung von css4-selector: Fokus sichtbar momentan sehr schwach:
https://caniuse.com/#search=focus-visible

pavelkarev
quelle
2

Einfach schreiben outline:none;. Kein Pseudoelement erforderlichfocus

Sandeep Sharma
quelle
1

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

npm install --save focus-visible

Fügen Sie das Skript zu Ihrem HTML hinzu:

<script src="/node_modules/focus-visible/dist/focus-visible.min.js"></script>

oder importieren Sie in Ihre Haupteintragsdatei, wenn Sie Webpack oder ähnliches verwenden:

import 'focus-visible/dist/focus-visible.min';

Dann legen Sie dies in Ihre CSS-Datei:

// hide the focus indicator if element receives focus via mouse, but show on keyboard focus (on tab).
.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

// Define a strong focus indicator for keyboard focus.
// If you skip this then the browser's default focus indicator will display instead
// ideally use outline property for those users using windows high contrast mode
.js-focus-visible .focus-visible {
  outline: magenta auto 5px;
}

Sie können einfach einstellen:

button:focus {outline:0;}

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.

alexrogers
quelle
1

Ich hatte das gleiche Problem mit Bootstrap. Ich löste sowohl mit Umriss als auch mit Kastenschatten

.btn:focus, .btn.focus {
    outline: none !important;
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0) !important; // or none
}
Corsaro
quelle