webentwicklung-frage-antwort-db.com.de

die Bootstrap-Schaltfläche zeigt beim Anklicken blaue Konturen

Ich habe dies hinzugefügt, aber die blaue Kontur erscheint immer noch, wenn die Schaltfläche angeklickt wird.

.btn:focus {
  outline: none;
}

wie entferne ich das hässliche Ding?

csstwitter-bootstrap
93
user3522457

Möglicherweise werden Ihre Eigenschaften überschrieben . Versuchen Sie, !important zusammen mit: active an Ihren Code anzuhängen.

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

Fügen Sie auch Feldschatten hinzu, da Sie sonst immer noch den Schatten um die Schaltfläche sehen können.

155
Janak

In der neuesten Version von Bootstrap habe ich festgestellt, dass das Entfernen der Gliederung selbst nicht funktioniert. Und ich muss dies hinzufügen, da es auch einen Box-Schatten gibt:

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

Das ist mir in Chrome passiert (allerdings nicht in Firefox). Ich habe herausgefunden, dass die outline-Eigenschaft von Bootstrap als outline: 5px auto -webkit-focus-ring-color; festgelegt wurde. Gelöst durch Überschreiben der outline-Eigenschaft 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;
}
12
barburakka

dies löst eine Schaltfläche mit einem Text, 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 border:none !important; hinzufügen

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

die Schaltfläche wird dann kleiner, wenn Sie darauf klicken.

11
Eddy

Unter dem folgenden Code versuchen 

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

Es gibt eine integrierte boostrap-Klasse shadow-none zum Deaktivieren von box-shadow (nicht outline) ( https://getbootstrap.com/docs/4.1/utilities/shadows/ ). Dies entfernt den Schatten der Schaltfläche:

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

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

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);
}
5
Slobodan Kovacevic

Versuche dies 

.btn
{
    box-shadow: none;
    outline: none;
}
5
Subodh Sharma

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

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

3
paul

Dies kann hilfreich sein, wenn jemand diese Frage noch nicht gelö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>

3
Gaby Evangelista

Hier ist meine Bootstrap 4-Lösung zum Entfernen der Schaltfläche

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

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

Ich habe mich entschieden, einfach die Rahmenbreite von :focus zu entfernen. Dadurch wird der hässliche Abstand zwischen der Umrandung 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;
}
3
Jason

Ich fand das in meinem Fall nach dem Klicken mit der Taste recht nützlich.

$('#buttonId').blur();
3
Danny Cullen

Sie müssen die richtige Verschachtelung verwenden und anschließend Stile anwenden. 

  • Klicken Sie mit der rechten Maustaste auf die Schaltfläche, und finden Sie die genaue Schachtelung für diese Klasse mithilfe von (Element mit Feuerwanze auf Firefox prüfen), (Element auf Chrom prüfen).

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

2
Orahmax

Dieser funktionierte für mich in Bootstrap 4: 

.btn {border-color: transparent;}

2
Steffo Dimfelt
a:focus {
  outline: none;
}

das funktioniert für mich unter BS3

2
Alex LH

Versuchen Sie das unten

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

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

1
xhunter

Denken Sie daran, wenn sich der Knopf in einem Anker 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. Sie müssen ggf. die CSS-Regeln a:focus, a:active { outline: none } hinzufügen (dies hat für mich funktioniert).

1
RyanT

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

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

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

#buttonId {
     box-shadow: none;
}

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

1
webtechnelson

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;
}
0
Vaibhav Singh

Das Ändern dieser Werte hat bei mir funktioniert. Ich habe es in den 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 die Farbe der Schaltfläche ändert sich nur beim Klicken.

0
Ivan Aldwin A. Cristobal

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

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

Diese Methode kann dazu führen, dass der Rand in das Vorhandensein eingeblendet wird und dann kurz wieder zurückgesetzt wird, was meiner Meinung nach nicht schlecht aussieht (er scheint Teil der Antwort zu sein, wenn auf die Schaltfläche geklickt wird).

Der Grund, aus dem ich .mousemove () verwendete, ist, dass sich .click () und .mouseup () als unwirksam erwiesen haben.

0
Wesley Kelly

Ü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;
}
0
ZEF

Eigentlich sind in bootstrap alle Variablen für alle Fälle definiert. In Ihrem Fall müssen Sie lediglich die Standardvariable '$ input-btn-focus-box-shadow' der Datei '_variables.scss' überschreiben. So: $input-btn-focus-box-shadow: none; Beachten Sie, dass Sie diese Variable in Ihrem eigenen benutzerdefinierten '_yourCusomVarsFile.scss' überschreiben müssen. Und diese Datei sollte in erster Ordnung im Projekt importiert werden und dann wie folgt bootstrapieren:

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

Die Bootstraps-Variablen werden 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 Var hat mehr Priorität als die zweite. Dasselbe gilt für die übrigen Zustände und Fälle. Hoffe, es wird Ihnen helfen.

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

Chears 

0
Tsurule Vol

Statt auf die Button-Klasse (. BTN) zu zielen, ziele ich hier auf das Button -Element selbst und es funktioniert für mich.

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

Und kann shadow-none Klasse für Eingabefeld verwenden

0
Nawaraj

sehr einfach : 

.btn {outline: none;}
0
Saurabh Mistry