'Put a border color around a div when click on radio

I use boostrap 5

I have some radio button. When I click on one, I would like to show it's selected.

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

To hidde radio button (circle) in my css file i put

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

On click event for answer class i tried to assign value to border-color but that don't have any effect.

javascriptcsstwitter-bootstrap


Solution 1:[1]

You can't use pointer-events: none; look into it, it is used when you don't want to have any event, but in this case you need a click event. Remove that and use :checked ~ img, or if you want the text to be outlined then go with .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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 zeljkoDe

Related Questions