单击收音机时在 div 周围添加边框颜色

Question

我用的是 boostrap 5

我有一些单选按钮。当我点击一个时，我想显示它已被选中。

<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>

在我放置的 css 文件中隐藏单选按钮（圆圈）

.hiddenRadio{
    position: fixed;
    opacity: 0;
    pointer-events: none;
}

点击事件回答 class 我试图给 border-color 赋值但是没有任何效果。

Answer 1

你不能使用 pointer-events: none;看看它，当你不想有任何事件时使用它，但在这种情况下你需要一个点击事件。删除它并使用 :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>

单击收音机时在 div 周围添加边框颜色

Put a border color around a div when click on radio

javascript

css

twitter-bootstrap