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

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

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>

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.

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}

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

button:focus {
  outline:none;
  box-shadow: none;
}

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.

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.

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

*{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

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. :) :)

für dieses Problem:

benutze das:

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

Ergebnis:

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.

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>

Das hat bei mir funktioniert:

button:focus {
    box-shadow:none;
}

Das Update für Chrome und andere Browser

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

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

*{
outline: none;
}

oder

*{
outline-style: none;
}

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

Ich hatte das gleiche Problem und benutzte einfaches CSS-

.custom-button {
    outline: none
}

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

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

Einfach schreiben outline:none;. Kein Pseudoelement erforderlichfocus

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.

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
}