pulsante di avvio al clic che mostra il colore predefinito

Question

Sto provando a definire il colore del pulsante con il codice sottostante, i colori funzionano finché non faccio clic sul pulsante, il pulsante mostra i colori predefiniti, come posso specificare i colori del pulsante onclick?

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

Answer 1

Il selettore :active è quello che ti serve per il clic.

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

Sembra che avete che al di sopra quindi se si sta ancora vedendo un colore leggermente diverso è più probabile a causa del box-shadow che viene applicato anche allo stato active tasto. Disabilitare che in questo modo:

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

Edit: Il selettore che è prevalente il CSS è in realtà btn-success:active:focus. Quindi sarà necessario aggiungere quanto segue al css:

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

seguito alla mia commento qui sotto, si sarebbe meglio creare una classe, come btn-custom a cui è possibile applicare gli stili desiderati. Combinando questo con la classe esistente btn, è possibile ottenere il risultato desiderato con molto meno codice in quanto non sarà necessario eseguire l'override dei selettori esistenti.

Answer 2

Basta aggiungere il seguente codice nel tuo CSS

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

Answer 3

Devi usare la dichiarazione !important per farlo correcly.

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

Answer 4

Se si sta lavorando su un progetto personale, e non con una squadra, vale la pena notare che è possibile ignorare gli stili pseudo classe semplicemente applicando le stesse dichiarazioni di stile sulla classe "importante":

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

in generale, è una buona idea di stare lontano da! importante perché questo avrà la precedenza su ogni e tutte le dichiarazioni di stile di colore, background-color e border-color sulla classe BTN-successo (a meno che non si sovrascrive lo stile dichiarazioni di nuovo con! importanti più avanti nel tuo foglio di stile anche se è ridicolo).

Se l'obiettivo è la dimensione del file più piccola possibile e si utilizza questa classe ovunque nello stesso modo, ovvero senza stili in linea, questa potrebbe essere la soluzione migliore.

In alternativa, ma usando lo stesso modo di pensare, si può provare a nominare una nuova classe personalizzata come .btn-successo-importante, e applicarla solo dopo btn-successo dove è necessario utilizzare l'override.

C'è un problema però: se si combina .btn-successo o il tuo .btn-successo-importante con qualsiasi altro gruppo .btn di Bootstrap,! Important sovrascriverà qualsiasi stile di pseudo classe dichiarato all'interno. In questo caso potresti star meglio con la risposta di Guy (la classe personalizzata senza! Importanti dichiarazioni di stile).

Answer 5

qualche ispirazione dalla bootstrap source per superiori questi vari stati del pulsante in cui $ off-white e $ marca-nero sono definite da noi:

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

Answer 6

che premere il pulsante di animazione del colore predefinito è dovuto al fondo Immagine. Usare questo per ogni stile di nome (BTN-default, btn-successo, ecc):

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