CSS pour ajouter une ombre/une bordure à chaque bouton lorsque les boutons d'amorçage sont actifs

Question

J'utilise le framework React pour créer le front-end et j'utilise Bootstrap 5.3 pour la conception.

D'après ma compréhension, Bootstrap a désormais éliminé l'effet d'ombre en tant que standard. Ainsi, si le bouton est actif, il n'affichera pas d'ombre/bordure, comme dans la documentation Bootstrap v5.0.

https://getbootstrap.com/docs/5.0/components/buttons/

Malheureusement, je ne sais pas comment personnaliser des boutons individuels directement dans le code. Est-il possible d'activer cet effet d'ombre en ajoutant une balise de style au bouton, ou une balise d'étiquette aux boutons regroupés ?

style={{*Voici un peu de magie CSS*}}

Voici un exemple de code que je souhaite personnaliser trois boutons avec cet effet d'ombre portée que nous connaissons depuis la version 5.0.

<div className="row">
  <h4>Sélectionner le tampon</h4>
</div>
<div className="row">
  <div className="col-sm-4 p-3 d-flex justifier-content-center">
    <input type="radio" className="btn-check" name="chooseBuffer" id="buffer1" autoComplete="off" onClick={() => mesureConfig.buffer = 1 } />
    <label className="btn btn-lg btn-warning" htmlFor="buffer1"><span className="bi-database-add"></span>&nbsp;buffer1</label> ;
  </div>
  <div className="col-sm-4 p-3 d-flex justifier-content-center">
    <input type="radio" className="btn-check" name="chooseBuffer" id="buffer2" autoComplete="off" onClick={() => mesureConfig.buffer = 2 } />
    <label className="btn btn-lg btn-success" htmlFor="buffer2"><span className="bi-database-add"></span>&nbsp;buffer2</label> ;
  </div>
  <div className="col-sm-4 p-3 d-flex justifier-content-center">
    <input type="radio" className="btn-check" name="chooseBuffer" id="buffer3" autoComplete="off" onClick={() => mesureConfig.buffer = 3 } />
    <label className="btn btn-lg btn-info" htmlFor="buffer3"><span className="bi-database-add"></span>&nbsp;buffer3</label> ;
  </div>
</div>

Merci d'avance !

Answer 1

À l'aide de ce CSS, il sélectionnera l'étiquette adjacente suivante de l'entrée du bouton radio sélectionné.

input[type="radio"]:checked+label.btn {
   border: 1px solid #000; //在这里添加边框/阴影
}