CSS zum Hinzufügen von Schatten/Rahmen zu jeder Schaltfläche, wenn Bootstrap-Schaltflächen aktiv sind

Question

Ich verwende das React-Framework zum Erstellen des Frontends und verwende Bootstrap 5.3 für das Design.

Nach meinem Verständnis hat Bootstrap den Schatteneffekt mittlerweile standardmäßig eliminiert. Wenn die Schaltfläche also aktiv ist, zeigt die Schaltfläche keinen Schatten/Rahmen an, wie in der Bootstrap v5.0-Dokumentation.

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

Leider weiß ich nicht, wie ich einzelne Schaltflächen direkt im Code anpassen kann. Ist es möglich, diesen Schatteneffekt zu aktivieren, indem man der Schaltfläche ein Style-Tag oder den gruppierten Schaltflächen ein Label-Tag hinzufügt?

style={{*Hier ist etwas CSS-Magie*}}

Hier ist ein Beispielcode. Ich möchte drei Schaltflächen mit diesem Schlagschatteneffekt anpassen, den wir aus Version 5.0 kennen.

<div className="row">
  <h4>Puffer auswählen</h4>
</div>
<div className="row">
  <div className="col-sm-4 p-3 d-flex justify-content-center">
    <input type="radio" className="btn-check" name="chooseBuffer" id="buffer1" autoComplete="off" onClick={() =>measurementConfig.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 justify-content-center">
    <input type="radio" className="btn-check" name="chooseBuffer" id="buffer2" autoComplete="off" onClick={() =>measurementConfig.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 justify-content-center">
    <input type="radio" className="btn-check" name="chooseBuffer" id="buffer3" autoComplete="off" onClick={() =>measurementConfig.buffer = 3 } />
    <label className="btn btn-lg btn-info" htmlFor="buffer3"><span className="bi-database-add"></span>&nbsp;buffer3</label> ;
  </div>
</div>

Vielen Dank im Voraus!

Answer 1

使用这个css，它将会选择被选中的单选框输入的下一个相邻的标签。

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