J'ai un groupe de boutons de Bootstrap:
<div class="btn-group btn-group-toggle" data-toggle="buttons"> <label class="btn btn-secondary active"> <input type="radio" name="options" id="option1" autocomplete="off" checked> Active </label> <label class="btn btn-secondary"> <input type="radio" name="options" id="option2" autocomplete="off"> Radio </label> <label class="btn btn-secondary"> <input type="radio" name="options" id="option3" autocomplete="off"> Radio </label> </div>
Peut-être que c'est basique, mais j'essaye de changer:
et rien ne fonctionne. Comme celui-ci : Bootstrap 4: Buttongroup - changer la couleur active
4 Réponses :
Vous pouvez utiliser la propriété ! Important
pour votre CSS.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script> <div class="btn-group btn-group-toggle" data-toggle="buttons"> <label class="btn btn-secondary active"> <input type="radio" name="options" id="option1" autocomplete="off" checked> Active </label> <label class="btn btn-secondary"> <input type="radio" name="options" id="option2" autocomplete="off"> Radio </label> <label class="btn btn-secondary"> <input type="radio" name="options" id="option3" autocomplete="off"> Radio </label> </div>
.btn.active { background-color: lime !important; border-color: lime !important; color: yellow !important; }
Merci mais comment définissez-vous la couleur d'arrière-plan du bouton non sélectionné? et la couleur du texte aussi?
Il est préférable de donner au btn-group
un identifiant unique et d'utiliser des sélecteurs CSS. UniqueID.btn
pour tous les boutons inactifs, UniqueID.btn.active
pour le bouton actif
vous avez besoin de
/* selected btn css */ .btn-group-toggle .btn:not(:disabled):not(.disabled).active, .btn-group-toggle .btn:not(:disabled):not(.disabled):active, .show>.btn.dropdown-toggle { color: #fff; background-color: #2196F3; border-color: #2196F3; } /* non selected btn css */ .btn-group-toggle .btn { color: #fff; background-color: #b7b7b7; border-color: #6c757d; }
pour que cela ressemble à ceci
voir la démo https://codepen.io/anon/pen/qgLGXP
Cela ne fonctionnera pas pour moi, les boutons restent les mêmes, étant donné le code HTML exact que j'ai tapé ici.
Mettez simplement la propriété suivante dans la classe .active
.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> <div class="btn-group btn-group-toggle" data-toggle="buttons"> <label class="btn btn-secondary active"> <input type="radio" name="options" id="option1" autocomplete="off" checked> Active </label> <label class="btn btn-secondary"> <input type="radio" name="options" id="option2" autocomplete="off"> Radio </label> <label class="btn btn-secondary"> <input type="radio" name="options" id="option3" autocomplete="off"> Radio </label> </div> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
et vous avez terminé.
.active{ background-color: #8064A2 !important; }
.active{ background-color: #8064A2 !important; }
Si je comprends votre question, vous souhaitez obtenir le même effet que l'autre message SO que vous avez lié.
Essayez d'ajouter ce css:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <br><br><br> <div class="btn-group btn-group-toggle" data-toggle="buttons"> <label class="btn btn-secondary active"> <input type="radio" name="options" id="option1" autocomplete="off" checked> Active </label> <label class="btn btn-secondary"> <input type="radio" name="options" id="option2" autocomplete="off"> Radio </label> <label class="btn btn-secondary"> <input type="radio" name="options" id="option3" autocomplete="off"> Radio </label> </div> </div> </body> </html>
.btn .btn-secondary, .active { background-color: #e21833 !important; border-color: #e21833 !important; color: yellow !important; } .btn .btn-secondary, .active:hover { background-color: #900900 !important; border-color: #900900 !important; color: white !important; }