Image instead of radio button [closed] - html

Question

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 3 years ago.
Improve this question
I'm probably making a small mistake, but I tried to follow the answers to the previously asked questions on the subject.
I'm trying to replace my radio button with an image. The image shows perfectly and I can click the image to select the radio button. But the mark-up won't hide my radio button. It does when I hardcode it in the HTML code, but well... let's not go there!
.radioImg {
display:inline;
width:30%;
}
.radioImg input[type=radio] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
/* IMAGE STYLES */
.radioImg input[type=radio] + img {
cursor: pointer;
}
/* CHECKED STYLES */
.radioImg input[type=radio]:checked + img {
outline: 2px solid #f00;
}
<form action= "{{ url_for('mechanics') }}" method="POST">
<fieldset>
<legend>What type of system do you want?</legend>
<br />
<label class="radioImg">
<input checked="checked" name="system" type="radio" value="type1">
<img src="static/type1.jpg">
</label>
<label class="radioImg">
<input name="system" type="radio" value="type2">
<img src="static/type2.jpg">
</label>
<label class="radioImg">
<input name="system" type="radio" value="type3">
<img src="static/type3.jpg">
</label>
<br />
<br />
<button type="submit" value="Next">Next</button>
</fieldset>
</form>
I tried to follow: Use images instead of radio buttons,
but the radio buttons still won't hide as you can see:

Answer 1

The weird thing is that when I try to replicate your problem with your code, I don't run into the same problem. I think you have some extra CSS somewhere affecting your HTML.
.radioImg {
display: inline;
width: 30%;
}
.radioImg input[type=radio] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
/* IMAGE STYLES */
.radioImg input[type=radio]+img {
cursor: pointer;
}
/* CHECKED STYLES */
.radioImg input[type=radio]:checked+img {
outline: 2px solid #f00;
}
<form action="{{ url_for('mechanics') }}" method="POST">
<fieldset>
<legend>What type of system do you want?</legend>
<br />
<label class="radioImg">
<input checked="checked" name="system" type="radio" value="type1">
<img src="static/type1.jpg">
</label>
<label class="radioImg">
<input name="system" type="radio" value="type2">
<img src="static/type2.jpg">
</label>
<label class="radioImg">
<input name="system" type="radio" value="type3">
<img src="static/type3.jpg">
</label>
<br />
<br />
<button type="submit" value="Next">Next</button>
</fieldset>
</form>

Answer 2

Apparently, I should clear my cache every time I change the markup of /static/... files.

Answer 3

This is what you were looking for
/* HIDE RADIO */
[type=radio] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
/* IMAGE STYLES */
[type=radio] + img {
cursor: pointer;
}
/* CHECKED STYLES */
[type=radio]:checked + img {
outline: 2px solid red;
}
<label>
<input type="radio" name="test" value="small" checked>
<img src="http://placehold.it/40x60/0bf/fff&text=A">
</label>
<label>
<input type="radio" name="test" value="big">
<img src="http://placehold.it/40x60/b0f/fff&text=B">
</label>