我使用boostrap 5
我有一些單選按鈕。當我單擊一個時，我想顯示它已被選中。
<div class="row">
<div >
<div >
<input value="single" type="radio" >
<img src="/img/ski.png" >
<label>Ski</label>
</div>
</div>
<div >
<div >
<input value="single" type="radio" >
<img src="/img/kayak.png" >
<label>Kayak</label>
</div>
</div>
</div>
在我的css檔案中隱藏單選按鈕（圓圈）
.hiddenRadio{
position: fixed;
opacity: 0;
pointer-events: none;
}
在答案類的單擊事件中，我嘗試將值分配給邊框顏色，但這沒有任何效果。
uj5u.com熱心網友回復：
您不能使用指標事件：無；看一下，當你不想有任何事件時使用它，但在這種情況下你需要一個點擊事件。洗掉它并使用:checked ~ img，或者如果您想要概述文本，然后使用.hiddenRadio:checked ~ label
.hiddenRadio{
position: fixed;
opacity: 0;
}
.hiddenRadio:checked ~ img {
border: 2px solid red;
}<div class="row">
<div class="col-sm-6">
<div class="answer">
<input value="single" type="radio" class="hiddenRadio">
<img src="/img/ski.png" class="card-img-top">
<label>Ski</label>
</div>
</div>
<div class="col-sm-6">
<div class="answer">
<input value="single" type="radio" class="hiddenRadio">
<img src="/img/kayak.png" class="card-img-top">
<label>Kayak</label>
</div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/445620.html
標籤：javascript css 推特引导
上一篇：如何在引導程式5中創建備用塊