Die Bootstrap-Schaltfläche zeigt beim Klicken einen blauen Umriss an

Ich habe dies hinzugefügt, aber der blaue Umriss erscheint immer noch, wenn auf die Schaltfläche geklickt wird.

.btn:focus {
  outline: none;
}

Wie kann man dieses hässliche Ding entfernen?

Möglicherweise werden Ihre Eigenschaften überschrieben. Versuchen Anbringen !importantan Ihren Code zusammen mit dem: aktiv.

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

Fügen Sie auch Box-Shadow hinzu, da sonst der Schatten um die Schaltfläche weiterhin angezeigt wird.

Obwohl dies keine gute Vorgehensweise ist! Wichtig, schlage ich vor, dass Sie eine spezifischere Klasse verwenden und dann versuchen, das CSS mit! Wichtig ... anzuwenden.

In der neuesten Version von Bootstrap hat das Entfernen der Gliederung selbst nicht funktioniert. Und ich muss das hinzufügen, weil es auch einen Kastenschatten gibt:

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

Es gibt eine integrierte Boostrap-Klasse shadow-nonezum Deaktivieren box-shadow(nicht outline) ( https://getbootstrap.com/docs/4.1/utilities/shadows/ ). Dadurch wird der Schatten der Schaltfläche entfernt:

<button class='btn btn-primary shadow-none'>Example button</button>

Versuchen Sie es mit dem folgenden Code

.button:active, 
 button:active,
.button:focus, 
 button:focus,
.button:hover, 
 button:hover{
    border:none !important;
    outline:none !important;
}

Dies passierte mir in Chrome (allerdings nicht in Firefox). Ich habe herausgefunden, dass die outlineEigenschaft von Bootstrap als festgelegt wurde outline: 5px auto -webkit-focus-ring-color;. Gelöst durch Überschreiben der outlineEigenschaft später in meinem benutzerdefinierten CSS wie folgt:

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

Dadurch wird die Schaltfläche mit einem Text gelöst. Die Schaltfläche, nur ein Symbol oder eine Schaltfläche ist ein Link:

 <!--1. button with a text -->
 <button type="button" class="btn btn-success" id="newWord">Save</button>

 <!--2. button only with a close icon -->
 <button type="button" class="close"></button>

 <!--3. button is a link -->
 <a class="btn btn-success btn-xs" href="#">Save</a>



button,
button:active,
button:focus, 
button:hover,
.btn,
.btn:active, 
.btn:focus, 
.btn:hover{   
    outline:none !important;
}

wenn Sie hinzufügen border:none !important;

{
    border:none !important;
    outline:none !important;
}

dann wird die Schaltfläche beim Klicken kleiner.

Versuche dies

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

In Bootstrap 4 verwenden sie box-shadow: 0 0 0 0px rgba(0,123,255,0);on: focus, si ich habe mein Problem mit gelöst

a.active.focus,
a.active:focus,
a.focus,
a:active.focus,
a:active:focus,
a:focus,
button.active.focus,
button.active:focus,
button.focus,
button:active.focus,
button:active:focus,
button:focus,
.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus {
    outline: 0;
    outline-color: transparent;
    outline-width: 0;
    outline-style: none;
    box-shadow: 0 0 0 0 rgba(0,123,255,0);
}

Selbst nachdem der Umriss von der Schaltfläche entfernt wurde, indem der Wert auf 0 gesetzt wurde, zeigt die Schaltfläche beim Klicken immer noch ein komisches Verhalten. Ihre Größe wird etwas kleiner. Also habe ich eine optimale Lösung gefunden:

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

Hoffe das hilft...

Sie müssen die richtige Verschachtelung verwenden und dann Stile darauf anwenden.

• Klicken Sie mit der rechten Maustaste auf die Schaltfläche und suchen Sie die genaue Verschachtelung der Klasse mit (Element mit Firebug auf Firefox prüfen) (Element auf Chrom untersuchen).

• Fügen Sie der ganzen Klasse Stil hinzu. Nur dann würde es funktionieren

Ich fand das in meinem Fall nach dem Klicken auf die Schaltfläche sehr nützlich.

$('#buttonId').blur();

Ich habe mich dafür entschieden, einfach die Randbreite zu entfernen :focus. Dadurch wird der hässliche Abstand zwischen dem Umriss und den abgerundeten Ecken der Schaltfläche entfernt. Aus irgendeinem Grund tritt dieses Problem nur bei tatsächlichen Schaltflächenelementen und nicht bei <a class="btn">Elementen auf.

button.btn:focus {
  border-width: 0;
}

Dies kann hilfreich sein, wenn jemand diese Frage noch ungelöst hat.

(function() {
  $('button').on('click', function() {
    $("#action").html("button was clicked");
    console.log("the button was clicked");
  });
})();

.btn-clear {
  background-color: transparent !important;
  border-style: none !important;
  cursor: pointer;
}

.btn-clear:active,
.btn-clear:focus {
  outline-style: none !important;
  outline-color: transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- this button has default style -->
<button>Action</button>
<!-- this button is clear of style -->
<button class="btn-clear">Action</button>

<label id="action"></label>

Hier ist meine Boostrap 4-Lösung zum Entfernen der Schaltflächenkontur

/*
* Boostrap 4
* Remove blue outline from button
*/

.btn:focus,
.btn:active {
  box-shadow: none;
}

Ich hatte gerade das gleiche Problem und der folgende Code funktionierte für mich:

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

.btn {
  margin:32px;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->




<button type="button" class="btn btn-default">Button</button>

Ich hoffe es wird helfen!

Tatsächlich werden im Bootstrap alle Variablen für alle Fälle definiert. In Ihrem Fall müssen Sie nur die Standardvariable '$ input-btn-focus-box-shadow' aus der Datei '_variables.scss' überschreiben. So: $input-btn-focus-box-shadow: none; Beachten Sie, dass Sie diese Variable in Ihrer eigenen benutzerdefinierten '_yourCusomVarsFile.scss' überschreiben müssen. Und diese Datei sollte in der ersten Reihenfolge in das Projekt importiert und dann wie folgt gebootet werden:

@import "yourCusomVarsFile";
@import "bootstrap/scss/bootstrap";
@import "someOther";

Die Bootstraps-Vars sind mit dem Flag '! Default' versehen.

$input-focus-box-shadow: $input-btn-focus-box-shadow !default;

In Ihrer Datei überschreiben Sie also die Standardwerte. Hier die Abbildung:

$input-focus-box-shadow: none;
$input-focus-box-shadow: $input-btn-focus-box-shadow !default;

Die allererste Variable hat mehr Priorität als die zweite. Gleiches gilt für die übrigen Staaten und Fälle. Hoffe es wird dir helfen.

Hier ist die Datei '_variable.scss' von repo, in der Sie alle Initialenwerte von bootstrap finden: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss

Chears

a:focus {
  outline: none;
}

Das funktioniert bei mir auf BS3

Dieser hat in Bootstrap 4 für mich funktioniert:

.btn {border-color: transparent;}

Versuchen

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

Denken Sie daran, wenn sich Ihr Knopf innerhalb eines Ankers befindet wie:

<a href='some_link'>
    <button class='btn'>Button</button>
</a>

Das Hinzufügen des Stils zur Schaltfläche selbst reicht möglicherweise nicht aus. Möglicherweise müssen Sie gegebenenfalls die a:focus, a:active { outline: none }CSS-Regeln hinzufügen (dies hat bei mir funktioniert).

Versuchen Sie das Folgende

.bootstrap-select .dropdown-toggle:focus 
 {
          outline: 0 !important;
 }

Manchmal {outline: 0}hat das Problem nicht gelöst und wir können es versuchen{box-shadow: none;}

Ich verwende Bootstrap 4, Sie können Gliederung und Box-Shadow verwenden.

#buttonId {
    box-shadow: none;
    outline: none;
}

Oder wenn sich die Schaltfläche in einem Element wie einem Div ohne Hintergrund befindet, reicht Box-Shadow aus.

#buttonId {
     box-shadow: none;
}

Beispiel: https://codepen.io/techednelson/pen/XRwgRB

Wenn Sie Version 4.3 oder höher verwenden, funktioniert Ihr Code nicht ordnungsgemäß. Das habe ich benutzt. Es hat bei mir funktioniert.

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

Anstatt auf die Schaltflächenklasse ( .btn ) zu zielen, ziele ich hier auf das Schaltflächenelement selbst ab und es funktioniert für mich.

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

Und kann shadow-noneKlasse als Eingabefeld verwenden

Hier ist eine Nicht-CSS-Methode. Entfernen Sie mit JQuery einfach die Klasse "focus", wenn auf das Element geklickt wurde.

$(".btn").mousemove(function(element) { $(this).removeClass("focus"); });

Diese Methode kann dazu führen, dass der Rahmen blinkt und dann kurz wieder ausgeblendet wird, was meiner Meinung nach nicht schlecht aussieht (es sieht aus wie ein Teil der Antwort, wenn auf die Schaltfläche geklickt wird).

Der Grund, warum ich .mousemove () verwendet habe, ist, dass sich .click () und .mouseup () als unwirksam erwiesen haben.

Das Ändern dieser Werte hat bei mir funktioniert. Ich habe es anhand der Entwicklertools von Chrome gefunden

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: /*Change This*/;
    border-color: /*Change This*/;
}

Dadurch bleibt auch der Schatten der Schaltfläche erhalten, und nur die Farbe der Schaltfläche wird beim Klicken geändert.

Überschreiben Sie die genauen Bootstrap-Anweisungen:

.btn-primary.focus, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,.btn-primary:not(:disabled):not(.disabled):active:focus,.show>.btn-primary.dropdown-toggle:focus{
 box-shadow: none;
}

Ändern Sie die Rahmenfarbe wieder in Grau

.btn:focus,
.btn:active{
 border: 1px solid #ced4da !important;
}

Der SCSS-Weg für alle Elemente (nicht nur Schaltflächen):

body {
  * {
    &:focus, &.focus,
    &:active, &.active {
      outline: transparent none 0 !important;
      box-shadow: 0 0 0 0 rgba(0,123,255,0) !important;
      -webkit-box-shadow: none !important;
    }
  }
}