<p>Saya menggunakan rangka kerja React untuk mencipta bahagian hadapan dan menggunakan Bootstrap 5.3 untuk reka bentuk. </p> <p>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. </p> <p>https://getbootstrap.com/docs/5.0/components/buttons/</p> <p>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? </p> <pre class="brush:php;toolbar:false;">style={{*Inilah beberapa sihir CSS*}}</pre> <p>Berikut ialah beberapa kod sampel yang saya mahu sesuaikan tiga butang dengan kesan bayang-bayang jatuh ini yang kita ketahui daripada v5.0. </p> <pre class="brush:php;toolbar:false;"><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></pre> <p>Terima kasih terlebih dahulu! </p>

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