I have come up with a clever solution for incorporating images into radio buttons by placing them within a label element:
<label>
<input type="radio" name="foo">
<img src="...">
</label>
To achieve this design, I have added the following CSS styles:
label {
float: left;
width: 100px;
height: 100px;
position: relative;
cursor: pointer;
}
label input[type=radio] {
opacity: 0;
}
label img {
position: absolute;
top: 0;
left: 0;
opacity: 0.5;
}
:checked + img {
opacity: 1;
}
In essence, each label acts as a container for an img, visually filling the space of a regular radio button. The actual radio input is hidden using opacity:0. Users can easily discern their selection based on the opacity of the associated image, providing room for creative visual effects.
What I particularly appreciate about this approach is its simplicity - at its core, it remains just a set of radio buttons within a form.
Using opacity to hide the radio buttons instead of display:none or visibility:hidden ensures that they remain accessible through keyboard navigation, preserving the form's usability.