Put a border color around a div when click on radio-CodePudding

I use boostrap 5

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

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

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.

CodePudding user response：

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