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

137

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?

user3522457
quelle
versuchen Sie, :activefür die Taste einzustellen . Zusätzlich: Verwenden Sie den Inspektor in Ihrem Browser, um das Problem zu finden.
Adrian Preuß
1
Können Sie Ihr bisschen mehr Code oder jsfiddle Demo posten, damit wir Ihnen helfen können
Richa
Sie sind sich bei Schaltflächen nicht sicher, aber Bootstrap fügt Eingabefeldern, die mit Box-Shadow entfernt werden können, Box-Shadow hinzu: none;
Davidcondrey
3
FWIW, das Fokus-Styling ist wichtig für die Tastaturnavigation.
Nate Whittaker
Ein Bild wäre hier nützlich
Hühnersuppe

Antworten:

202

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.

Janak
quelle
@ Janak Aber warum ist es notwendig, wenn das: active überschrieben wird?
Ich kann auch hinzufügen, dass beim Nuking mit! Important die
7
Wenn Sie Bootstrap 4 verwenden, fügen Sie dieser Antwort box-shadow: nonedas Präfix hinzu (und vergessen Sie es nicht -webkit-box-shadow: none). Beachten Sie auch, dass Bootstrap 4 bereits .btn:focus { outline: none }BTN-Klassen enthält.
Cooleronie
1
Visuelle Hinweise sind wichtig, wenn Sie nicht mit der Maus navigieren. Wenn Sie die Gliederung entfernen, müssen Sie ein anderes visuelles Feedback hinzufügen, sonst haben Sie Ihre Website verkrüppelt.
Josef Engelfrost
52

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;
}
Chang
quelle
1
Das hat mir geholfen.
Vahx
Wenn Sie sicherstellen möchten, dass Sie alle Ihre Schaltflächen drücken, verwenden Sie einfach die Schaltfläche {Gliederung: keine! Wichtig; Kastenschatten: keine! wichtig; }
Drew
52

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>
Rinat
quelle
Ich danke dir sehr.
Nikolay Tsenkov
3
Dies ist die beste Antwort
jmrueda
1
Dies ist die Lösung, die Sie suchen. Dies ist die Lösung, bewegen Sie sich, bewegen Sie sich. Danke, das hat es für Firefox mit Bootstrap 4 gelöst.
swudev
In diesem Beitrag geht es darum, den Umriss zu entfernen, nicht den Schatten. Leider ist dieser Kommentar irreführend.
Clay Records
Ja, es war die beste Antwort, aber warum wird es nicht auf Alert Dismissing Cross Button akzeptiert
Nawaraj
19

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;
}
Sandig
quelle
4
Ich brauchte diesen Teil nur, um die Gliederung in Chrom zu entfernen: button: focus {Gliederung: keine;}
TTT
13

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;
}
Barburakka
quelle
12

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.

Eddy
quelle
8

Versuche dies

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

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

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

Hoodboy007
quelle
3

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

Orahmax
quelle
3

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

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

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;
}
Jason
quelle
3

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>

Gaby Evangelista
quelle
3

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;
}
0x1ad2
quelle
3

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!

paul
quelle
Gliederung! doh !! Schlag
Adam Cox
3

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

Tsurule Vol
quelle
2
a:focus {
  outline: none;
}

Das funktioniert bei mir auf BS3

Alex LH
quelle
2

Dieser hat in Bootstrap 4 für mich funktioniert:

.btn {border-color: transparent;}

Steffo Dimfelt
quelle
2

Versuchen

.btn-primary:focus { 
  box-shadow: none !important; 
}
Punitkumar Kulli
quelle
1

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

RyanT
quelle
1

Versuchen Sie das Folgende

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

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

xhunter
quelle
1

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

Webtechnelson
quelle
1

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;
}
Vaibhav Singh
quelle
Du hast recht. Ohne -webkit-box-shadow funktioniert es nicht: keine! Wichtig; Linie.
Emir
1

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

Nawaraj
quelle
0

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.

Wesley Kelly
quelle
2
neh. Fügen Sie mehr Javascript hinzu, um CSS zu besiegen. Dies ist nicht die beste Vorgehensweise. MEINER BESCHEIDENEN MEINUNG NACH.
David
0

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.

Ivan Aldwin A. Cristobal
quelle
0

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

Ändern Sie die Rahmenfarbe wieder in Grau

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

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