bouton bootstrap sur clic montrant la couleur par défaut
J'essaie de styliser 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 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;
}
6 réponses
Le sélecteur :active est ce dont vous avez besoin pour le clic.
.btn-sample:active {
// click styles here
}
Il semble que vous avez cela ci-dessus, donc si vous voyez toujours une couleur légèrement différente, c'est probablement à cause de box-shadow qui est également appliqué à l'état du bouton active. Désactivez cela comme ceci:
.btn-sample:active {
box-shadow: none;
}
Modifier:
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 classe propre telle que btn-custom à laquelle vous pouvez appliquer les 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'aurez pas besoin de remplacer les sélecteurs existants.
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;
}
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;
}
Un peu d'inspiration de la source bootstrap Pour remplacer ces différents états de boutons où $off-white et $brand-black 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;
}
}
}
Si vous travaillez sur un projet personnel, et non avec une équipe, il est à noter que vous pouvez remplacer les styles de pseudo-classe simplement en appliquant"!important " pour les mêmes déclarations de style sur la classe:
.btn-success {
color: #ffffff !important;
background-color: #161617 !important;
border-color: #494F57 !important;
}
Généralement, c'est une bonne idée de rester loin de !important car cela remplacera toutes les déclarations de style de couleur, de couleur d'arrière-plan et de couleur de bordure sur la classe btn-success (sauf si vous remplacez à nouveau les déclarations de style avec !important plus tard dans votre feuille de style bien que ce soit ridicule).
Si l'objectif est la plus petite taille de fichier possible et que vous utilisez cette classe partout de la même manière-ce qui signifie pas de styles en ligne - alors cela peut être votre meilleure option.
Alternativement, mais en utilisant la même pensée, vous pouvez essayer de nommer une nouvelle classe personnalisée quelque chose comme .btn-success-important, et ne l'appliquez qu'après btn-success où vous devez utiliser la substitution.
Il y a un hic cependant: Si vous combinez .btn-succès ou votre .btn-succès-important avec tout autre Bootstrap .btn-group, !important remplacera tout style de pseudo-classe déclaré dans. Dans ce cas, vous pouvez être mieux avec la réponse de Guy (la classe personnalisée sans !déclarations de style importantes).
Cette animation de pression de bouton de la couleur par défaut est due à 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;
}