Use images instead of radio buttons (HTML/CSS) - html

Question

I have a div of radio buttons:
<div class="radio-line">
<label>
<img src="img/black.jpeg" />
<input type="radio" name="choice1" value="1"/>
</label>
<label>
<img src="img/blue.jpg" />
<input type="radio" name="choice1" value="2"/>
</label>
</div>
And here's my CSS:
img {
width: 20vw;
height: 20vw;
padding: 2vw;
}
input[type=radio] {
display: none;
}
img:hover {
opacity: 0.4;
cursor: pointer;
}
img:active {
opacity:0.4;
cursor: pointer;
}
input[type=radio]:checked + img {
border: 20px solid rgb(228, 207, 94);
}
When I hover over a square, the square opacity will change, but nothing happens when I click on the square (when it should be "checked", a border should surround it). I've been playing around with different divs and labels, but nothing is working.
img {
width: 20vw;
height: 20vw;
padding: 2vw;
}
input[type=radio] {
display: none;
}
img:hover {
opacity:0.6;
cursor: pointer;
}
img:active {
opacity:0.4;
cursor: pointer;
}
input[type=radio]:checked + img {
border: 20px solid rgb(228, 207, 94);
}
<label>
<img src="img/black.jpeg" />
<input type="radio" name="choice-1" value="1"/>
</label>
<label>
<img src="img/blue.jpg" />
<input type="radio" name="choice-1" value="1"/>
</label>

Answer 1

You can used the :checked pseudo-class and sibling selectors to achieve the effect.
So first thing is to move into a structure where inputs are siblings of the labels instead of descendants, and include a "for" attribute that links them
img {
width: 20vw;
height: 20vw;
padding: 2vw;
}
input[type=radio] {
display: none;
}
img:hover {
opacity:0.6;
cursor: pointer;
}
img:active {
opacity:0.4;
cursor: pointer;
}
input[type=radio]:checked + label > img {
border: 20px solid rgb(228, 207, 94);
}
<input type="radio" name="choice" id="choose-1" value="1"/>
<label for="choose-1">
<img src="https://placehold.it/200/200/" />
</label>
<input type="radio" name="choice" id="choose-2" value="2"/>
<label for="choose-2">
<img src="https://placehold.it/200/200/" />
</label>

Answer 2

You can use jQuery to set an onClick function on the images. Assign the images a custom class e.g: radioImage and in jQuery:
$( ".radioImage" ).click(function() {
$( this ).css("border", "20px solid rgb(228, 207, 94)");
});

Answer 3

You should set for property of label to the name of input you want.
In this case, it maybe looks like this:
<input type="radio" name="choice-1" id="choice-1" value="1"/>
<label for="choice-1">
<img src="img/black.jpeg" />
</label>
<input type="radio" name="choice-1" id="choice-2" value="1"/>
<label for="choice-2">
<img src="img/blue.jpg" />
</label>