So entfernen Sie den Fokus um Schaltflächen beim Klicken


225

Meine Schaltflächen sind alle hervorgehoben, nachdem ich auf sie geklickt habe. Dies ist in Chrome.

Nicht ausgewählt Ausgewählt

<button class="btn btn-primary btn-block">
    <span class="icon-plus"></span> Add Page
</button>

Ich verwende Bootstrap mit einem Thema, bin mir aber ziemlich sicher, dass es nicht so ist: Ich habe dies bereits bei einem anderen Projekt bemerkt.

Es verschwindet, wenn ich <a>stattdessen ein Tag verwende <button>. Warum? Wenn ich verwenden wollte, <button>wie würde ich es verschwinden lassen?


12
Umriss: 0; könnte Sie interessieren
Wiggler Jtag

Wird nach dem Klicken eine Klasse hinzugefügt?
Kuzgun

1
Gliederung: 0 scheint nicht zu helfen, noch Webkit-Aussehen
Sean Clark Hess

6
28 Antworten auf alle Vorschläge, mit denen verschiedene Methoden zur Umgehung dieses Problems vorgeschlagen werden, sind ein Beweis für den traurigen Zustand der heutigen Front-End-Webentwicklung.
Deltanin

3
Menschen, die diese Barrierefreiheit als Problem betrachten, sind der Beweis für den traurigen Zustand der heutigen Front-End-Webentwicklung.
Quentin

Antworten:


292

Ich habe diese Fragen und Antworten auf einer anderen Seite gefunden, und das Überschreiben des Tastenfokusstils hat bei mir funktioniert. Dieses Problem kann für MacOS mit Chrome spezifisch sein.

.btn:focus {
  outline: none;
  box-shadow: none;
}

Beachten Sie jedoch, dass dies Auswirkungen auf die Barrierefreiheit hat und erst empfohlen wird, wenn Sie einen guten konsistenten Fokusstatus für Ihre Schaltflächen und Eingaben haben. Gemäß den Kommentaren unten gibt es Benutzer, die keine Mäuse verwenden können.


33
Ich habe auch darüber nachgedacht, aber hat das Entfernen der Gliederung keine Probleme mit der Barrierefreiheit?
Silvenon

10
Ich denke, wir haben keine andere Wahl. Sie können den .btn:active:focusSelektor auch hinzufügen , um ihn aus dem aktiven Status zu entfernen.
Silvenon

45
Das Entfernen des Umrisses von einer Schaltfläche ist definitiv schlecht für die Zugänglichkeit. Es gibt Benutzer, die eine Maus nicht steuern können und in der Lage sein müssen, mit der Tastatur durch eine Seite zu blättern. Das Entfernen des Umrisses macht dies sehr schwierig. Es ist wahrscheinlich besser zu verhindern, dass die Schaltfläche beim Klicken den Fokus erhält.
Murphy Randle

Für zukünftige Reisende ersetzt dieser Code vollständig alle Stile in allen Schaltflächenzuständen für die Standardschaltfläche (nicht alle Schaltflächen):.btn-default, .btn-default:hover, .btn-default:active, .btn-default:active:focus, .btn-default:visited, .btn-default:focus { color: #dcdcdc; background-color: #232323; outline: none; }
Geordie

1
Wenn Sie integrierte Bootstrap-Variablen verwenden, können Sie dies erreichen, indem Sie diese beiden Variablen auf Folgendes setzen: $ btn-focus-width: 0; $ btn-focus-box-shadow: keine;
Bullettrain

109

Du willst so etwas wie:

<button class="btn btn-primary btn-block" onclick="this.blur();">...

Die .blur () -Methode entfernt die Fokushervorhebung korrekt und bringt die Bootstraps-Stile nicht durcheinander.


9
Dies zeigt den Umriss für einen kurzen Moment, der ihn immer noch ruiniert: /
Silvenon

2
Ich sehe kein Flackern, wenn ich das Fokusereignis anstelle des Klickereignisses auslöse.
Charles

2
Das hat super geklappt! Gibt es potenzielle Probleme, wenn ich versuchen würde, einen anderen click () -Ereignishandler (dh den Code, der ausgeführt wird, wenn Sie auf diese Schaltfläche klicken) an dieselbe Schaltfläche anzuhängen?
Nils_e

4
Wenn sich hier jemand fragt, ob dies in Bootstrap v4 funktioniert, ist dies der Fall. Antwort noch gültig im Jahr 2018, Prost!
jreed

4
Ist die Barrierefreiheit im Vergleich zur am häufigsten gestellten Frage in Ordnung?
CharlesM

47

mein Verständnis ist , dass der Schwerpunkt wird zunächst nach dem angelegten onMouseDownEreignisse, so rief e.preventDefault()in onMouseDownkann eine saubere Lösung nach Bedarf abhängig sein. Dies ist sicherlich eine barrierefreie Lösung, aber offensichtlich wird das Verhalten von Mausklicks angepasst, die möglicherweise nicht mit Ihrem Webprojekt kompatibel sind.

Ich verwende derzeit diese Lösung (innerhalb eines react-bootstrapProjekts) und erhalte nach einem Klick kein Fokusflimmern oder beibehaltenen Fokus von Schaltflächen, kann meinen Fokus jedoch weiterhin tabellieren und den Fokus derselben Schaltflächen visuell visualisieren.


2
Ja. Ihre Lösung funktioniert. Danke für den Tipp. Hier ist die Geige für die Lösung. Es ist jedoch erforderlich, dass an jede Schaltfläche ein Javascript-Handler angehängt wird. Es wäre großartig, wenn wir dies nur durch eine CSS-Lösung erreichen könnten.
Galeel Bhasha

1
Ich denke, die Leute erwarten, dass der Fokus auf einem Element liegt, wenn Sie darauf klicken, und diese Lösung verhindert dies. Ich klicke oft auf ein Element und bewege mich dann weg, bevor ich die Maus loslasse, um es zu fokussieren, damit ich von da an tabulieren kann.
Michael Tontchev

7
Für alle, die nach einem Snippet suchen, sollte dies funktionieren und onClick beibehalten:onMouseDown={e => e.preventDefault()}
Adam K Dean

1
Dies verhindert, dass die Leertaste und die Eingabetaste auf die Schaltfläche "klicken". Vielleicht ist eine vollständigere Lösung, dies wieder hinzuzufügen mit : onKeyUp={(e) => {if (e.keyCode === 13 || e.keyCode === 32) handleClick()}.
jfbloom22

Sie sollten e.preventDefault () nicht innerhalb des onKeyUpEreignisses aufrufen . Wenn Sie dies tun, bleibt die Schaltfläche fokussiert, nachdem Sie die Leertaste oder die Eingabetaste gedrückt und irgendwo gedrückt oder geklickt haben.
jfbloom22

31

Ich kann nicht glauben, dass dies noch niemand gepostet hat.

Verwenden Sie eine Beschriftung anstelle einer Schaltfläche.

<label type="button" class="btn btn-primary btn-block">
<span class="icon-plus"></span> Add Page
</label>

Geige


11
Dies funktioniert für die meisten Benutzer einwandfrei, aber diese Methode ist weder für Bildschirmleser noch für Tastaturen geeignet und führt dazu, dass blinde Benutzer und Benutzer mit eingeschränkten motorischen Fähigkeiten nicht mit der Schaltfläche interagieren können.
Murphy Randle

8
1. Ersetzen Sie das Etikett durch das <a> -Tag. so dass es über die Tastatur zugänglich ist. 2. Fügen Sie aria-role = "button" hinzu, um die Zugänglichkeit für Benutzer von Bildschirmleseprogrammen zu verbessern. aktualisiert Geige
Galeel Bhasha

nette lösung, hat mir geholfen, funktioniert aber irgendwie nicht für eckige richtlinie, auch nicht mit einem wrapper, zB<a class="btn"><my-directive/></a>
ya_dimon

2
Etiketten werden für Nicht-Mäuse-Benutzer beim Herumtippen völlig übersprungen, was für die Zugänglichkeit schlecht ist
Felipe,

1
In Bootstrap 4 scheint sich das Aussehen der Schaltfläche zu ändern.
Jason Kim

30

Es ist zwar einfach, die Gliederung für alle fokussierten Schaltflächen zu entfernen (wie in der Antwort von user1933897 ), aber diese Lösung ist aus Sicht der Barrierefreiheit schlecht (siehe z. B. Stop Messing mit der Standardfokus-Gliederung des Browsers ).

Andererseits ist es wahrscheinlich unmöglich, Ihren Browser davon zu überzeugen, die angeklickte Schaltfläche nicht mehr als fokussiert zu gestalten, wenn er denkt, dass sie fokussiert ist, nachdem Sie darauf geklickt haben (ich sehe Sie an, Chrome unter OS X).

Also was können wir tun? Ein paar Optionen kommen mir in den Sinn.

1) Javascript (jQuery): $('.btn').mouseup(function() { this.blur() })

Sie weisen Ihren Browser an, den Fokus um eine Schaltfläche sofort nach dem Klicken auf die Schaltfläche zu entfernen . Durch die Verwendung von mouseupanstelle von clickbehalten wir das Standardverhalten für tastaturbasierte Interaktionen bei ( mouseupwird nicht durch die Tastatur ausgelöst).

2) CSS: .btn:hover { outline: 0 !important }

Hier deaktivieren Sie die Kontur nur für schwebende Schaltflächen. Offensichtlich ist es nicht ideal, kann aber in einigen Situationen ausreichen.


4
Die Nummer 1 ist ein nützlicher Tipp. Der Fokus wird deaktiviert, wenn die Taste nicht gedrückt wird. Er wird jedoch angezeigt, während er gedrückt wird. Ich habe den Fokus auf das angeklickte aktive Element mit deaktiviert :active:focus {outline:none;}.
sicherlich

Die Kurzfunktionen, die Ereignis-Listener binden, sind in jQuery veraltet, daher ist es besser, wenn Sie .on('mouseup', function() { ... })anstelle von.mouseup()
Crazy Redd

16

Das hat bei mir funktioniert. Ich habe eine benutzerdefinierte Klasse erstellt, die das erforderliche CSS überschreibt.

.custom-button:focus {
    outline: none !important;
    border: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

Geben Sie hier die Bildbeschreibung ein

Der -webkit-box-shadow funktioniert für Chrome- und Safari-Browser.


funktioniert für mich, aber ich musste border: none !important;für Knopf entfernen , um die gleichen Abmessungen beizubehalten
Emeka Mbah

1
Ich wollte den onClick-Fokus über den Antworten entfernen, die nicht funktionierten, aber "box-shadow: none! Important;" seine Arbeit für mich danke @Menaka
Zaif Warm

11

Dies funktioniert bei mir, eine andere Lösung wird nicht erwähnt. Wirf es einfach in das Klick-Event ...

$(this).trigger("blur");

Oder rufen Sie es von einem anderen Ereignis / einer anderen Methode auf ...

$(".btn_name").trigger("blur");

Das Problem dabei ist, dass ein Tastaturbenutzer den Fokus verliert, wenn er auf die Schaltfläche "klickt" (indem er sie fokussiert und dann die Leertaste drückt). Sie müssen dann den ganzen Weg zurück zu Ihrem Standort gehen. 😡
Tamlyn

8

Wenn Sie die Regel :focus { outline: none; }zum Entfernen von Konturen verwenden, kann der Link oder das Steuerelement fokussiert werden, ohne dass der Tastaturbenutzer den Fokus angibt. Methoden zum Entfernen wie JS onfocus="blur()"sind noch schlimmer und führen dazu, dass Tastaturbenutzer nicht mit dem Steuerelement interagieren können.

Zu den Hacks, die Sie verwenden können und die in Ordnung sind , gehört das Hinzufügen von :focus { outline: none; }Regeln, wenn Benutzer mit der Maus interagieren, und das Entfernen dieser Regeln, wenn eine Tastaturinteraktion erkannt wird. Lindsay Evans hat dafür eine Bibliothek erstellt: https://github.com/lindsayevans/outline.js

Aber ich würde es vorziehen, eine Klasse auf dem HTML- oder Body-Tag zu setzen. Und haben Sie in der CSS-Datei die Kontrolle darüber, wann dies verwendet werden soll.

Zum Beispiel (Inline-Ereignishandler dienen nur zu Demonstrationszwecken):

<html>
<head>
<style>
  a:focus, button:focus {
    outline: 3px solid #000;
  }
  .no-focus a, .no-focus button {
    outline: none;
  } 
</style>
</head>
<body id="thebody" 
onmousedown="document.getElementById('thebody').classList.add('no-focus');"
onkeydown="document.getElementById('thebody').classList.remove('no-focus');">
    <p>This her is <a href="#">a link</a></p>   
    <button>Click me</button>
</body>
</html>

Ich habe einen Stift zusammengelegt: http://codepen.io/snobojohan/pen/RWXXmp

Beachten Sie jedoch, dass es Leistungsprobleme gibt. Dies erzwingt jedes Mal ein Neulackieren, wenn der Benutzer zwischen Maus und Tastatur wechselt. Weitere Informationen zum Vermeiden unnötiger Farben http://www.html5rocks.com/de/tutorials/speed/unnecessary-paints/


6

Ich habe das Gleiche bemerkt und obwohl es mich wirklich nervt, glaube ich, dass es keinen richtigen Weg gibt, damit umzugehen.

Ich würde gegen alle anderen angegebenen Lösungen empfehlen, da sie die Zugänglichkeit der Schaltfläche vollständig beeinträchtigen. Wenn Sie also jetzt auf die Schaltfläche klicken, erhalten Sie nicht den erwarteten Fokus.

Dies sollte vermieden werden!

.btn:focus {
  outline: none;
}

Ich denke nicht, dass dies falsch ist, da Sie beim Fokussieren immer noch einen etwas anderen Blitz auf der Taste haben, sodass selbst Tastaturbenutzer dies immer noch erkennen können. Aber das ist nicht genug, denn Sie erhalten immer noch einen Rahmen, wenn Sie die linke Maustaste gedrückt halten
Apocalypz

6

Ich finde eine Lösung. Wenn wir uns konzentrieren, verwendet Bootstrap Box-Shadow, daher deaktivieren wir es einfach (nicht genügend Reputation, Bild kann nicht hochgeladen werden :().

ich füge hinzu

.btn:focus{
    box-shadow:none !important;
}

Es klappt.


6

OPTION 1: Verwenden Sie die :focus-visiblePseudoklasse

Die :focus-visiblePseudoklasse kann verwendet werden, um die unschönen Umrisse und Fokusringe auf Schaltflächen und verschiedenen Elementen für Benutzer zu beseitigen, die NICHT über die Tastatur navigieren (dh per Berührung oder Mausklick).

/** 
 * The default focus style is likely provided by Bootstrap or the browser
 * but here we override everything else with a visually appealing cross-
 * browser solution that works well on all focusable page elements
 * including buttons, links, inputs, textareas, and selects.
 */
*:focus { 
  outline: 0 !important;
  box-shadow:
    0 0 0 .2rem #fff, /* use site bg color to create whitespace for faux focus ring */
    0 0 0 .35rem #069 !important; /* faux focus ring color */
}

/**
 * Undo the above focused button styles when the element received focus
 * via mouse click or touch, but not keyboard navigation.
 */
*:focus:not(:focus-visible) {
  outline: 0 !important;
  box-shadow: none !important;
}

Warnung: Ab 2020 wird die :focus-visiblePseudoklasse nicht mehr in allen Browsern unterstützt . Die Polyfüllung ist jedoch sehr einfach zu verwenden; siehe Anweisungen unten.


OPTION 2: Verwenden Sie die .focus-visiblePolyfüllung

Diese Lösung verwendet eine normale CSS-Klasse anstelle der oben genannten Pseudoklasse und bietet umfassende Browserunterstützung, da es sich um eine offizielle Javascript-basierte Polyfüllung handelt .

Schritt 1: Fügen Sie die Javascript-Abhängigkeiten zu Ihrer HTML-Seite hinzu

Hinweis: Für die fokussichtbare Polyfüllung ist eine zusätzliche Polyfüllung für mehrere ältere Browser erforderlich, die classList nicht unterstützen :

<!-- place this code just before the closing </html> tag -->
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=Element.prototype.classList"></script>
<script src="https://unpkg.com/focus-visible"></script>

Schritt 2: Fügen Sie Ihrem Stylesheet das folgende CSS hinzu

Das Folgende ist eine modifizierte Version der CSS-Lösung, die oben ausführlicher dokumentiert wurde.

/**
 * Custom cross-browser styles for keyboard :focus overrides defaults.
 */
*:focus { 
  outline: 0 !important;
  box-shadow:
    0 0 0 .2rem #fff,
    0 0 0 .35rem #069 !important;
}

/**
 * Remove focus styles for non-keyboard :focus.
 */
*:focus:not(.focus-visible) {
  outline: 0 !important;
  box-shadow: none !important;
}

Schritt 3 (optional): Verwenden Sie bei Bedarf die Klasse "Fokus sichtbar"

Wenn Sie Elemente haben, bei denen Sie den Fokusring tatsächlich anzeigen möchten, wenn jemand auf Touch klickt oder diese verwendet, fügen Sie die focus-visibleKlasse einfach dem DOM-Element hinzu.

<!-- This example uses Bootstrap classes to theme a button to appear like
     a regular link, and then add a focus ring when the link is clicked --->
<button type="button" class="btn btn-text focus-visible">
  Clicking me shows a focus box
</button>

Ressource:

Demo:


Aber wenn selbst Chrome es noch nicht unterstützt, ist es wahrscheinlich nicht die beste Lösung (für den
Elijah Mock

Was schlagen Sie stattdessen vor?
James Wilson

Verstecken Sie den Umriss wie in den anderen Antworten angegeben, bis diese Lösung standardisierter ist
Elijah Mock,

Wenn die Barrierefreiheit ein Problem darstellt, ist es nach meiner Lektüre <whatever>:focus { outline: none }eine schlechtere Idee als die Lösung , die Carte Blanche zu verbergen . Es gibt tatsächlich Leute in der Eingabehilfen-Community, die es vorziehen, dass Sie NIEMALS Umrisse entfernen und stattdessen dafür sorgen, dass alles einen: Fokus-Stil hat (entweder Umriss oder Kastenschatten), und nicht unterstützen möchten: Fokus-sichtbar, bis Browser eine Möglichkeit zum Zulassen implementieren Die Benutzer geben eine Benutzereinstellung an, ob alle Elemente fokussierbar sein sollen oder nicht. Ich denke gerne: Fokus-sichtbar ist ein glückliches Medium zwischen Design-Anliegen und a11y.
James Wilson

5

Wenn das oben genannte für Sie nicht funktioniert, versuchen Sie Folgendes:

.btn: focus {Umriss: keine; Kastenschatten: keine; Rand: 2px fest transparent;}

Wie user1933897 hervorhob, ist dies möglicherweise spezifisch für MacOS mit Chrome.


Dies gilt jedoch weiterhin für die Verwendung bootstrap 4.0- in Windows
3gwebtrain

5

Spät, aber wer weiß, kann jemandem helfen. Das CSS würde folgendermaßen aussehen:

.rhighlight{
   outline: none !important;
   box-shadow:none
}

Der HTML-Code würde folgendermaßen aussehen:

<button type="button" class="btn btn-primary rHighlight">Text</button> 

Auf diese Weise können Sie BTN und die damit verbundenen Verhaltensweisen beibehalten.


1
element:focus { box-shadow: none; }blaue Kontur / Schatten entfernt.
user435421

3

Ich habe dies oben in einem Kommentar erwähnt, aber es lohnt sich, es aus Gründen der Klarheit als separate Antwort aufzulisten. Solange Sie sich nicht wirklich auf die Schaltfläche konzentrieren müssen, können Sie sie mit dem Fokusereignis entfernen, bevor CSS-Effekte angewendet werden können:

$('buttonSelector').focus(function(event) {
    event.target.blur();
});

Dadurch wird das Flackern vermieden, das bei Verwendung des Klickereignisses auftritt. Dies schränkt die Benutzeroberfläche ein und Sie können nicht auf die Schaltfläche zugreifen, dies ist jedoch nicht in allen Anwendungen ein Problem.


Das war der halbe Trick für mich. Ich benutze React und React-Bootstrap. Nach dem Klicken blieb die Schaltfläche mit einem Leuchten hervorgehoben. Hinzufügen von e.target.blur (); Entfernt das Leuchten, aber die Schaltfläche behält eine andere Farbe.
Pixelwiz

3

Stil

.not-focusable:focus {
    outline: none;
    box-shadow: none;
}

Verwenden von

<button class="btn btn-primary not-focusable">My Button</button>

Wie unterscheidet sich diese Lösung von den anderen Antworten?
Apaul

2
Es gibt nur einen kleinen Unterschied: Sie können den Fokus für Elemente entfernen, die Sie benötigen, indem Sie die Klasse "nicht fokussierbar" angeben, ohne das Verhalten aller Schaltflächen, Links usw. zu überschreiben.
Bogdan Kanteruk

3

Versuchen Sie diese Lösung, um den Rand um die Schaltfläche zu entfernen. Fügen Sie diesen Code in CSS hinzu.

Versuchen

button:focus{
outline:0px;
}

Wenn dies nicht funktioniert, verwenden Sie unten.

button:focus{
 outline:none !important;
 }

Zweitens funktioniert sogar mit React Material UI-Schaltfläche
Geek Guy

3

Für Leute, die einen reinen CSS-Weg wollen, um das zu tun:

:focus:not(:focus-visible) { outline: none }

Dies könnte auch für Links usw. funktionieren, und der Bonus behält die Zugänglichkeit der Tastatur bei. Schließlich wird es von Browsern ignoriert, die dies nicht unterstützen: Fokus sichtbar


4
Dies funktioniert nur unter Chrome mit aktivierten experimentellen Funktionen, wie unter developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
Justin Kahn am

focus-visiblehat jetzt eine offizielle Polyfüllung. Meine Antwort stackoverflow.com/a/60219624/413538 auf diese Frage erläutert, wie man all dies tatsächlich verstehen kann.
James Wilson

2

Wir hatten ein ähnliches Problem und stellten fest, dass Bootstrap 3 das Problem nicht auf den Registerkarten hat (in Chrome). Es sieht so aus, als würden sie einen Gliederungsstil verwenden , mit dem der Browser entscheiden kann, was am besten zu tun ist, und Chrome scheint zu tun, was Sie wollen: Zeigen Sie die Gliederung an, wenn Sie fokussiert sind, es sei denn, Sie haben nur auf das Element geklickt.

Die Unterstützung für outline-styleist schwer zu bestimmen, da der Browser entscheiden kann, was dies bedeutet. Am besten checken Sie ein paar Browser ein und haben eine Fallback-Regel.


2

Eine andere mögliche Lösung besteht darin, eine Klasse mit einem Javascript-Listener hinzuzufügen, wenn der Benutzer auf die Schaltfläche klickt, und diese Klasse dann mit einem anderen Listener im Fokus zu entfernen. Dadurch bleibt die Zugänglichkeit erhalten (sichtbares Tabbing), und gleichzeitig wird verhindert, dass Chrome beim Klicken auf eine Schaltfläche fokussiert ist.

JS:

$('button').click(function(){
    $(this).addClass('clicked');
});
$('button').focus(function(){
    $(this).removeClass('clicked');
});

CSS:

button:focus {
    outline: 1px dotted #000;
}
button.clicked {
    outline: none;
}

Vollständiges Beispiel hier: https://jsfiddle.net/4bbb37fh/


Verwenden Sie mouseDown anstelle von click. Beim Klicken wird der Umriss angezeigt, während die Maus gedrückt wird (ohne sie loszulassen).
Vincent Hoch-Drei


2
.btn:focus:active {
  outline: none;
}

Dadurch wird der Umriss beim Klicken entfernt, der Fokus bleibt jedoch beim Tabulieren erhalten (für a11y).


Dadurch wird nur der Umriss mit der Maus nach unten entfernt. Nach dem Klicken mit der Maus wird der Umriss angezeigt.
Wellspring

2

Das funktioniert am besten

.btn-primary.focus, .btn-primary:focus {
-webkit-box-shadow: none!important;
box-shadow: none!important;
}

1
  .btn:focus,.btn:active, a{
        outline: none !important;
        box-shadow: none;
     }

Diese Gliederung: Keine funktioniert sowohl für die Schaltfläche als auch für ein Tag


Wie beantwortet dies die Frage? Bitte fügen Sie eine Erklärung hinzu.
André Kool

1

Fügen Sie dies in CSS hinzu:

*, ::after, ::before {
    box-sizing: border-box;
    outline: none !important;
    border: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

1

Ich habe eine Lösung gefunden, die einfach unter der Zeile in Ihrem CSS-Code hinzugefügt wird.

button:focus { outline: none }

0

Ich hatte gerade das gleiche Problem unter MacOS und Chrome, als ich eine Schaltfläche zum Auslösen eines "Übergangs" -Ereignisses verwendete. Wenn jemand, der dies liest, bereits einen Ereignis-Listener verwendet, können Sie ihn lösen, indem Sie .blur()nach Ihren Aktionen aufrufen .

Beispiel:

 nextQuestionButtonEl.click(function(){
    if (isQuestionAnswered()) {
        currentQuestion++;
        changeQuestion();
    } else {
        toggleNotification("invalidForm");
    }
    this.blur();
});

Wenn Sie jedoch noch keinen Ereignis-Listener verwenden, kann das Hinzufügen eines Listeners zur Behebung dieses Problems zu unnötigem Overhead führen, und eine Styling-Lösung wie die vorherigen Antworten ist besser.


0

Sie können einstellen tabIndex="-1". Der Browser überspringt diese Schaltfläche, wenn Sie mit der Tabulatortaste durch fokussierbare Steuerelemente fahren.

Andere hier vorgeschlagene "Korrekturen" entfernen nur die Fokuskontur, lassen die Schaltflächen jedoch weiterhin tabellarisch. Unter dem Gesichtspunkt der Benutzerfreundlichkeit haben Sie das Leuchten jedoch bereits entfernt, sodass Ihr Benutzer in keiner Weise weiß, auf welche Schaltfläche derzeit fokussiert wird.

Wenn Sie die Schaltfläche nicht tabellierbar machen, hat dies Auswirkungen auf die Barrierefreiheit.

Ich verwende es, um die Fokuskontur von der X-Schaltfläche in zu entfernen bootstrap modal, die in irgendeiner Weise die doppelte Schaltfläche "Schließen" unten hat, sodass meine Lösung keinen Einfluss auf die Barrierefreiheit hat.


0

Wenn Sie einen Webkit-Browser verwenden (und möglicherweise einen Browser, der mit dem Präfix des Webkit-Herstellers kompatibel ist), gehört diese Gliederung zur -webkit-focus-ringPseudoklasse der Schaltfläche . Einfach einstellen outlineauf none:

*:-webkit-focus-ring {
  outline: none;
}

Chrome ist ein solcher Webkit-Browser, und dieser Effekt tritt auch unter Linux auf (nicht nur eine MacOS-Sache, obwohl einige Chrome-Stile nur MacOS sind).


0

Ich hatte das gleiche Problem bei der Verwendung <a>als Schaltfläche und stellte fest, dass mir eine Problemumgehung fehlte, indem ich attr hinzufügte, damit type="button"sie sich zumindest für mich normal verhält.

<a type="button" class="btn btn-primary">Release Me!</a>


Das typeAttribut sollte keine Auswirkung darauf haben und buttonist ein ungültiger Wert dafür. Das Attribut akzeptiert einen MIME-Typ und teilt dem Client mit, welche Art von Daten er erwarten soll, wenn er dem Link folgt (z <a type="application/pdf" ...>. B.
Quentin,

@ Quentin Danke. Ja, ich bin mir dessen bewusst. Ich habe damit angefangen, role="button"aber es hat einfach nicht funktioniert (nachdem ich ein <button>statt verwendet habe <a>). Meine Implementierung verlangte ausdrücklich ein <a>und nicht <button>. Nachdem ich viel gebastelt hatte, entdeckte ich diese Problemumgehung (höchstwahrscheinlich ein BS-Fehler)!
spcsLrg

0

direkt im HTML-Tag (in einem Szenario, in dem Sie das Bootstrap-Thema möglicherweise an anderer Stelle in Ihrem Design beibehalten möchten).

Beispiele zu versuchen ..

<button style="border: transparent;">
<button style="border: 1px solid black;">

..ect,. abhängig vom gewünschten Effekt.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.