it-swarm.com.de

bootstrap-Schaltfläche beim Klicken, zeigt die Standardfarbe

Ich versuche, die Tastenfarbe mit dem folgenden Code zu stylen. Die Farben funktionieren, bis ich auf die Schaltfläche klicke. Die Schaltfläche zeigt die Standardfarben. Wie kann ich die Farben der Schaltfläche beim Klicken angeben?

.btn-success { 
 color: #ffffff; 
 background-color: #161617; 
 border-color: #494F57; 
} 

.btn-success:hover, 
.btn-success:focus, 
.btn-success:active, 
.btn-success.active, 
.open .dropdown-toggle.btn-success { 
 color: #ffffff; 
 background-color: #1F2838; 
 border-color: #494F57; 
} 

.btn-success:active, 
.btn-success.active, 
.open .dropdown-toggle.btn-success { 
 background-image: none; 
} 

.btn-success.disabled, 
.btn-success[disabled], 
fieldset[disabled] .btn-success, 
.btn-success.disabled:hover, 
.btn-success[disabled]:hover, 
 fieldset[disabled] .btn-success:hover, 
.btn-success.disabled:focus, 
.btn-success[disabled]:focus, 
fieldset[disabled] .btn-success:focus, 
.btn-success.disabled:active, 
.btn-success[disabled]:active, 
fieldset[disabled] .btn-success:active, 
.btn-success.disabled.active, 
.btn-success[disabled].active, 
fieldset[disabled] .btn-success.active { 
background-color: #161617; 
border-color: #494F57; 
} 

.btn-success .badge { 
  color: #161617; 
 background-color: #ffffff; 
}
27
user3312792

Die :active-Auswahl ist das, was Sie für den Klick benötigen. 

.btn-sample:active {
  // click styles here
}

Es sieht so aus, als hätten Sie das oben. Wenn Sie also immer noch eine etwas andere Farbe sehen, liegt dies höchstwahrscheinlich am box-shadow, der auch auf den active-Schaltflächenstatus angewendet wird. Deaktivieren Sie das so:

.btn-sample:active {
  box-shadow: none;
}

Bearbeiten: Die Auswahl, die Ihre CSS überschreibt, ist btn-success:active:focus. Sie müssen also Folgendes zu Ihrer CSS hinzufügen:

.btn-success:active:focus {
  color: #ffffff; 
  background-color: #161617; 
  border-color: #494F57;
}

Zusätzlich zu meinem Kommentar unten wäre es besser, wenn Sie eine eigene Klasse erstellen, z. B. btn-custom, auf die Sie Ihre gewünschten Stile anwenden können. Wenn Sie dies mit der vorhandenen btn-Klasse kombinieren, können Sie mit viel weniger Code das gewünschte Ergebnis erzielen, da Sie vorhandene Selektoren nicht überschreiben müssen.

57
Guy

Sie müssen die !important-Deklaration verwenden, um dies korrekt auszuführen.

.btn-success:hover, .btn-success:active, .btn-success:focus {
  color: #ffffff !important;
  background-color: #1F2838 !important;
  border-color: #494F57 !important;
}
15
xxxbence

Fügen Sie einfach den folgenden Code in Ihr CSS ein

.btn-success.active.focus, .btn-success.active:focus, .btn-success.active:hover, .btn-success:active.focus, .btn-success:active:focus, .btn-success:active:hover, .open>.dropdown-toggle.btn-success.focus, .open>.dropdown-toggle.btn-success:focus, .open>.dropdown-toggle.btn-success:hover
{
color: #fff;
background-color: #161617; 
border-color: #494F57; 
}
2
Amanjot Kaur

Einige Anregungen aus der Bootstrap-Quelle zum Überschreiben dieser verschiedenen Button-Zustände, in denen $ off-white und $ brand-black von uns definiert werden: 

.btn-success {
  &:hover,
  &:focus,
  &.focus {
    color: $off-white;
    background-color: $brand-black;
  }

  &:active,
  &.active,
  &.disabled,
  &:disabled {
    color: $off-white;
    background-color: $brand-black;

    &:focus,
    &.focus {
      color: $off-white;
      background-color: $brand-black;
    }
  }
}
1
Bill Brock

Diese Animation für die Tastendruckanimation der Standardfarbe ist auf das Hintergrundbild zurückzuführen. Verwenden Sie dies für jeden benannten Stil (btn-default, btn-success usw.):

.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  background-image: none;
}
0
Reuven Etzion

Wenn Sie an einem persönlichen Projekt und nicht mit einem Team arbeiten, ist es erwähnenswert, dass Sie Pseudoklassenstile überschreiben können, indem Sie einfach "! Important" auf die gleichen Stildeklarationen der Klasse anwenden: 

.btn-success { color: #ffffff !important; background-color: #161617 !important; border-color: #494F57 !important; }

Generell ist es eine gute Idee, sich von! Wichtig fernzuhalten, da dies alle Farb-, Hintergrund- und Rahmenfarben-Deklarationen in der BT-Erfolgsklasse überschreibt (es sei denn, Sie überschreiben die Stildeklarationen mit! Wichtig später in Ihrem Stylesheet obwohl das lächerlich ist). 

Wenn das Ziel die kleinstmögliche Dateigröße ist und Sie diese Klasse überall auf dieselbe Weise verwenden - dh keine Inline-Stile -, ist dies möglicherweise die beste Option. 

Alternativ, aber mit dem gleichen Gedanken, können Sie versuchen, eine neue benutzerdefinierte Klasse mit dem Namen .btn-success-important zu benennen und sie erst nach btn-success anzuwenden, wenn Sie die Überschreibung verwenden müssen.

Es gibt jedoch einen Haken: Wenn Sie .btn-success oder Ihre .btn-success-important mit einer anderen Bootstrap-.btn-Gruppe kombinieren, überschreibt! Important alle darin deklarierten Pseudoklassenstile. In diesem Fall können Sie mit Guys Antwort (der benutzerdefinierten Klasse ohne! Wichtige Stildeklarationen) besser beraten sein. 

0
bagofcole