ブートストラップ ボタンがアクティブなときに各ボタンに影/境界線を追加する CSS

Question

フロントエンドの作成には React フレームワークを使用し、設計には Bootstrap 5.3 を使用しています。

私の理解によれば、Bootstrap ではシャドウ効果が標準で削除されています。したがって、ボタンがアクティブな場合、Bootstrap v5.0 のドキュメントのように、ボタンには影や境界線が表示されません。

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

残念ながら、コード内で個々のボタンを直接カスタマイズする方法がわかりません。ボタンにスタイルタグを追加するか、グループ化されたボタンにラベルタグを追加することで、この影効果を有効にすることはできますか?

style={{*ここに CSS マジックがあります*}}

これは、v5.0 からわかっているこのドロップ シャドウ効果を使用して 3 つのボタンをカスタマイズするサンプル コードです。

<div className="row">
  <h4>バッファを選択</h4>
</div>
<div className="行">
  <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>

よろしくお願いします！

Answer 1

この CSS を使用すると、選択したラジオ ボタン入力の次に隣接するラベルが選択されます。

リーリー