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?
css
twitter-bootstrap
user3522457
quelle
quelle
:active
für die Taste einzustellen . Zusätzlich: Verwenden Sie den Inspektor in Ihrem Browser, um das Problem zu finden.Antworten:
Möglicherweise werden Ihre Eigenschaften überschrieben. Versuchen Anbringen
!important
an Ihren Code zusammen mit dem: aktiv.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.
quelle
box-shadow: none
das 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.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:
quelle
Es gibt eine integrierte Boostrap-Klasse
shadow-none
zum Deaktivierenbox-shadow
(nichtoutline
) ( https://getbootstrap.com/docs/4.1/utilities/shadows/ ). Dadurch wird der Schatten der Schaltfläche entfernt:quelle
Versuchen Sie es mit dem folgenden Code
quelle
Dies passierte mir in Chrome (allerdings nicht in Firefox). Ich habe herausgefunden, dass die
outline
Eigenschaft von Bootstrap als festgelegt wurdeoutline: 5px auto -webkit-focus-ring-color;
. Gelöst durch Überschreiben deroutline
Eigenschaft später in meinem benutzerdefinierten CSS wie folgt:quelle
Dadurch wird die Schaltfläche mit einem Text gelöst. Die Schaltfläche, nur ein Symbol oder eine Schaltfläche ist ein Link:
wenn Sie hinzufügen
border:none !important;
dann wird die Schaltfläche beim Klicken kleiner.
quelle
Versuche dies
quelle
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östquelle
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:
Hoffe das hilft...
quelle
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
quelle
Ich fand das in meinem Fall nach dem Klicken auf die Schaltfläche sehr nützlich.
quelle
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.quelle
Dies kann hilfreich sein, wenn jemand diese Frage noch ungelöst hat.
quelle
Hier ist meine Boostrap 4-Lösung zum Entfernen der Schaltflächenkontur
quelle
Ich hatte gerade das gleiche Problem und der folgende Code funktionierte für mich:
Ich hoffe es wird helfen!
quelle
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:Die Bootstraps-Vars sind mit dem Flag '! Default' versehen.
In Ihrer Datei überschreiben Sie also die Standardwerte. Hier die Abbildung:
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
quelle
Das funktioniert bei mir auf BS3
quelle
Dieser hat in Bootstrap 4 für mich funktioniert:
.btn {border-color: transparent;}
quelle
Versuchen
quelle
Denken Sie daran, wenn sich Ihr Knopf innerhalb eines Ankers befindet wie:
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).quelle
Versuchen Sie das Folgende
quelle
Manchmal
{outline: 0}
hat das Problem nicht gelöst und wir können es versuchen{box-shadow: none;}
quelle
Ich verwende Bootstrap 4, Sie können Gliederung und Box-Shadow verwenden.
Oder wenn sich die Schaltfläche in einem Element wie einem Div ohne Hintergrund befindet, reicht Box-Shadow aus.
Beispiel: https://codepen.io/techednelson/pen/XRwgRB
quelle
Wenn Sie Version 4.3 oder höher verwenden, funktioniert Ihr Code nicht ordnungsgemäß. Das habe ich benutzt. Es hat bei mir funktioniert.
quelle
Anstatt auf die Schaltflächenklasse ( .btn ) zu zielen, ziele ich hier auf das Schaltflächenelement selbst ab und es funktioniert für mich.
Und kann
shadow-none
Klasse als Eingabefeld verwendenquelle
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.
quelle
Das Ändern dieser Werte hat bei mir funktioniert. Ich habe es anhand der Entwicklertools von Chrome gefunden
Dadurch bleibt auch der Schatten der Schaltfläche erhalten, und nur die Farbe der Schaltfläche wird beim Klicken geändert.
quelle
Überschreiben Sie die genauen Bootstrap-Anweisungen:
quelle
Ändern Sie die Rahmenfarbe wieder in Grau
quelle
Der SCSS-Weg für alle Elemente (nicht nur Schaltflächen):
quelle