it-swarm.com.de

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

Ich arbeite an einer Webseite und möchte <button>-Tags im benutzerdefinierten Stil. Mit CSS sagte ich also: border: none. Jetzt funktioniert es perfekt in Safari, aber wenn ich auf eine der Schaltflächen klicke, wird in Chrom eine nervige blaue Umrandung angezeigt. Ich dachte, button:active { outline: none } oder button:focus { outline:none } würde funktionieren, aber beides nicht. Irgendwelche Ideen? 

So sieht es vor dem Klick aus (und ich möchte, dass es nach dem Klick noch aussieht):

Und das ist die Grenze, über die ich spreche:

enter image description here

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

Füge dies einfach zu deinem CSS hinzu:

button:focus {outline:0;}

Check it out 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>

1229
Ronen Cypis

Warten Sie! Es gibt einen Grund für diese hässliche Gliederung!

Bevor Sie diesen unschönen blauen Umriss entfernen, sollten Sie Barrierefreiheit berücksichtigen. Standardmäßig wird diese blaue Kontur auf fokussierbaren Elementen platziert. Auf diese Weise können Benutzer mit Zugänglichkeitsproblemen 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 die blaue Kontur entfernen, wird nicht mehr visuell angezeigt, auf welches Element sich der Fokus befindet. Wenn Sie den blauen Umriss entfernen möchten, sollten Sie ihn durch einen anderen visuellen Hinweis ersetzen , dass die Schaltfläche fokussiert ist.

Mögliche Lösung: Tasten abdunkeln, wenn sie fokussiert sind

In den folgenden Beispielen wurde der blaue Umriss von Chrome zuerst mit button:focus { outline:0 !important; } Entfernt.

Hier sind Ihre grundlegenden Bootstrap Schaltflächen, wie sie normalerweise angezeigt werden: Bootstrap Buttons in Normal State

Hier sind die Schaltflächen, wenn sie den Fokus erhalten: Bootstrap Buttons in Focused State

Hier die Tasten, wenn sie gedrückt werden: enter image description here

Wie Sie sehen, 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 merklicher Unterschied zwischen dem fokussierten Zustand und dem normalen Zustand der Taste besteht.

Es ist nicht nur für behinderte Benutzer

Das Verbessern des Zugriffs auf Ihre Website wird häufig übersehen, kann jedoch dazu beitragen, die Produktivität Ihrer Website zu steigern. Es gibt viele normale Benutzer, die Tastaturbefehle verwenden, um durch Websites zu navigieren, um die Hände auf der Tastatur zu behalten.

270
Nathan

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

*:focus {outline:none}

Wie bagofcole erwähnt, müssen Sie möglicherweise! Wichtig hinzufügen, damit der Stil so aussieht:

*:focus {outline:none !important}
51
Mike

Vergessen Sie nicht die !important-Deklaration, um ein besseres Ergebnis zu erhalten

button:focus {outline:0 !important;}

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

46
Scabbia

In meinem Fall musste ich box-shadow: none angeben.

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

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

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

outline zu entfernen ist schrecklich für die Zugänglichkeit! Im Idealfall wird der Fokusring nur angezeigt, wenn der Benutzer die Tastatur verwenden möchte.

Verwenden Sie : Fokus sichtbar . Es ist derzeit ein Vorschlag des W3C, nur den Tastaturfokus mit CSS zu gestalten. Solange wichtige Browser dies nicht unterstützen, können Sie dieses robuste polyfill 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 ein ausführlicheres post geschrieben, falls Sie weitere Informationen benötigen. 

9

Verwenden Sie entweder Folgendes:

:active {
    outline:none;
}

oder das, wenn das nicht funktioniert: 

:active {
   outline:none !important;
}

Das funktioniert für mich (zumindest FF und Chrome). Anstatt auf den :focus-Status zu zielen, richten Sie einfach den :active-Status ein. Dadurch wird die ästhetisch auffällige Markierung in Ihrem Browser entfernt, wenn ein Benutzer auf einen Link klickt. Der Fokusstatus bleibt jedoch erhalten, wenn ein Benutzer mit Behinderungen Registerkarten oder Schieberegler durch eine Seite führt. Beide Parteien sind glücklich. :)

8
chuk

Für alle, die Bootstrap verwenden und dieses Problem haben, verwenden sie: aktiv: Fokus sowie nur: aktiv und: Fokus, so dass Sie Folgendes benötigen:

element:active:focus {
    outline: 0;
}

Hoffentlich hat jemandem etwas Zeit gerettet, als ich herausfand, dass er herausgefunden hat. Er schlug mir den Kopf, weil er sich wunderte, warum so eine einfache Sache nicht funktionierte.

7
Forever Nomad

Das hat bei mir funktioniert:

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

für dieses problem:

 enter image description here

benutze das:

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

ergebnis:

 enter image description here

3

versuchen Sie diesen Code für alle Elemente, die ein Problem mit dem blauen Rand haben

*{
outline: none;
}

oder

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

Schreiben Sie einfach outline:none;. Keine Verwendung des Pseudoelements focus

2
Sandeep Sharma

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

input:focus {outline:0;}
2
aaayumi

Bis alle modernen Browser starten, wird der css-selector : focus-visible unterstützt.
Der einfachste und möglicherweise beste Weg, um save accessibility zu speichern, ist, diesen schwierigen Fokus nur für Mausbenutzer zu entfernen und für Tastaturbenutzer zu speichern:

1.Verwenden Sie diese winzige Polyfill (ca. 10kb): https://github.com/WICG/focus-visible
2. Fügen Sie den nächsten Code irgendwo in Ihrer CSS ein: 

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

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

2
pavelkarev

Dies ist ein Problem in der Chrome-Familie und war schon immer dort. 

Ein Fehler wurde gemeldet https://bugs.chromium.org/p/chromium/issues/detail?id=904208

Es kann hier angezeigt werden: https://codepen.io/anon/pen/Jedvwj sobald Sie einem Button einen Rahmen hinzufügen (etwa, dass role = "button" einem Tag hinzugefügt wurde ) Chrome ist fehlerhaft und legt den Fokusstatus fest, wenn Sie mit der Maus klicken.

Ich empfehle dringend, diesen Fix zu verwenden: https://github.com/wicg/focus-visible .

Machen Sie einfach folgendes

npm install --save focus-visible

Fügen Sie das Skript zu Ihrer HTML-Datei 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 fügen 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 can haben gerade gesetzt:

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 ihre Tastatur nur für Geschwindigkeit verwenden möchten.

1
alexrogins

Die meisten Lösungen funktionieren nicht, wenn Sie Bootstrap 4.1 und möglicherweise andere Versionen verwenden. Nach langem Headbangen habe ich festgestellt, dass Sie die shadow-none -Klasse anwenden müssen:

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

Ich war mit dem gleichen Problem konfrontiert und verwendete daher einfache CSS-

.custom-button {
    outline: none
}
1
apurv thakur

Ein anderer Weg, um das Problem der Zugänglichkeit zu lösen, das hier noch nicht erwähnt wurde, ist durch ein wenig Javascript. Credits gehen in diesem aufschlussreichen Blogpost vom Hacknachmittag: 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 der Mauszeiger erneut wechselt). Dann können Sie diese Klasse verwenden Anzeige einer Fokuskontur 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);
0
Tobija Fischer

ich hatte das gleiche Problem mit Bootstrap, das ich sowohl mit Umriss als auch mit Boxschatten löste

.btn:focus, .btn.focus {
outline: none!important;
box-shadow: 0 0 0 0 rgba(0, 123, 255, 0)!importamt; // Or none

}

0
corsaro

Das Update für Chrome und andere Browser

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