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

<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?

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.

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.

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.

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

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.

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

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

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

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/

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

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:

• https://css-tricks.com/keyboard-only-focus-styles/

Demo:

• https://wicg.github.io/focus-visible/demo/

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.

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.

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.

Stil

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

Verwenden von

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

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

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

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.

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/

Es ist Arbeit, ich hoffe dir zu helfen

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

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

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

Das funktioniert am besten

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

  .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

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

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

button:focus { outline: none }

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.

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.

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

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>

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.