CSS untuk menambah bayang/sempadan pada setiap butang apabila butang bootstrap aktif

Question

Saya menggunakan rangka kerja React untuk mencipta bahagian hadapan dan menggunakan Bootstrap 5.3 untuk reka bentuk.

Menurut pemahaman saya, Bootstrap kini telah menghapuskan kesan bayang-bayang sebagai standard. Jadi, jika butang aktif, butang itu tidak akan menunjukkan bayang/sempadan, seperti dalam dokumentasi Bootstrap v5.0.

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

Malangnya, saya tidak tahu cara menyesuaikan butang individu secara langsung dalam kod. Adakah mungkin untuk mengaktifkan kesan bayang-bayang ini dengan menambahkan tag gaya pada butang, atau tag label pada butang berkumpulan?

style={{*Inilah beberapa sihir CSS*}}

Berikut ialah beberapa kod sampel yang saya mahu sesuaikan tiga butang dengan kesan bayang-bayang jatuh ini yang kita ketahui daripada v5.0.

<div className="row">
  <h4>Pilih penimbal</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>

Terima kasih terlebih dahulu!

Answer 1

Menggunakan css ini, ia akan memilih label bersebelahan seterusnya bagi input butang radio yang dipilih.

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