How to create a Radio button with image?

Question

How can I make a Radio Button turn into an Image? I need to make an image gallery inside a form to, when clicking on the image would be selecting a radio button as in the image below:

Answer 1

You don’t need jQuery or Javascript for this. Use label and CSS.

Each element input may be associated with a label which it transmits to the input clicks. If you hide the input you get the functionality you want. Note: to hide the input you have to use visibility: hidden; or opacity: 0; because you hide with display: none; it will not be sent via form.

So having input and label side by side (and it has to be that way for CSS logic to work) you can have something like this:

input[type="radio"] {
        visibility: hidden;
}
    
label {
    display: block;
    border: 4px solid #666;
    width: 60px;
    float: left;
}

input[type="radio"]:checked+label {
    border-color: #ccf;
}
img {
  height: 50px;
}

<input type="radio" name="imagem" id="i1" />
<label for="i1"><img src="http://vkontakte.ru/images/gifts/256/81.jpg" alt=""></label>
<input type="radio" name="imagem" id="i2" />
<label for="i2"><img src="http://vkontakte.ru/images/gifts/256/82.jpg" alt=""></label>
<input type="radio" name="imagem" id="i3" />
<label for="i3"><img src="http://vkontakte.ru/images/gifts/256/83.jpg" alt=""></label>

jsFiddle: https://jsfiddle.net/0u1qqx6c/