web-dev-qa-db-fra.com

bouton bootstrap au clic montrant la couleur par défaut

J'essaye de styler la couleur du bouton avec le code ci-dessous, les couleurs fonctionnent jusqu'à ce que je clique sur le bouton, le bouton affiche les couleurs par défaut, comment puis-je spécifier les couleurs du bouton lors du clic?

.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; 
}
csstwitter-bootstrapbuttoncolors
27
user3312792

Le sélecteur :active est ce dont vous avez besoin pour le clic. 

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

Il semble que vous ayez cela ci-dessus, donc si vous voyez toujours une couleur légèrement différente, c'est probablement en raison du box-shadow qui s'applique également à l'état du bouton active. Désactiver ça comme ça:

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

Edit: Le sélecteur qui remplace votre css est en fait btn-success:active:focus. Vous devrez donc ajouter ce qui suit à votre css:

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

Suite à mon commentaire ci-dessous, vous feriez mieux de créer votre propre classe telle que btn-custom à laquelle vous pouvez appliquer vos styles souhaités. En combinant cela avec la classe btn existante, vous pouvez obtenir le résultat souhaité avec beaucoup moins de code car vous n'avez pas besoin de remplacer les sélecteurs existants.

57
Guy

Vous devez utiliser la déclaration !important pour le faire correctement.

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

Ajoutez simplement le code suivant dans votre 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; 
}
2
Amanjot Kaur

Une source d'inspiration provenant de bootstrap source pour remplacer ces différents états de bouton où $ $ blanc cassé et $ marque-noir sont définis par nous: 

.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

Ce bouton qui appuie sur l’animation de la couleur par défaut est dû à l’image d’arrière-plan. Utilisez ceci pour chaque style nommé (btn-default, btn-success, etc.):

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

Si vous travaillez sur un projet personnel et non avec une équipe, il convient de noter que vous pouvez remplacer les styles de pseudo-classes en appliquant simplement "! Important" aux mêmes déclarations de style de la classe: 

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

En règle générale, évitez! Important de choisir cette option car elle remplacera toutes les déclarations de style de couleur, couleur d'arrière-plan et couleur de bordure de la classe btn-success (à moins que vous ne remplaciez à nouveau les déclarations de style avec! Important feuille de style bien que ce soit ridicule). 

Si l'objectif est toutefois la taille de fichier la plus petite possible et que vous utilisez cette classe partout de la même manière, c'est-à-dire sans styles en ligne, cette option est peut-être la meilleure. 

Autrement, vous pouvez essayer de nommer une nouvelle classe personnalisée, telle que .btn-success-important, et de ne l'appliquer qu'après btn-success où vous devez utiliser le remplacement.

Il y a cependant un inconvénient: si vous combinez .btn-success ou votre .btn-success-important avec un autre groupe Bootstrap .btn,! Important remplacera tout style de pseudo-classe déclaré dans. Dans ce cas, vous aurez peut-être intérêt à utiliser la réponse de Guy (la classe personnalisée sans les déclarations de style importantes). 

0
bagofcole