当点击单选按钮时，在div周围放置一个边框颜色

Question

我使用助推器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;
}

在回答类的点击事件中，我试图为边框颜色赋值，但并没有任何效果。

Answer 1

您不能使用指针事件：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>