How can I make a Radio Button become an Image? I need to make a gallery of images inside a form so, clicking on the image would be selecting a radio button as in the image below:
How to create a Radio button with image?
5
asked by anonymous 26.12.2015 / 23:28
1 answer
6
You do not need jQuery or JavaScript for this. Uses label and CSS.
Each element input can be associated with a label that transmits to input clicks. If you hide input you get the functionality you want. Note: to hide the input you must use visibility: hidden; or opacity: 0; because if you hide with display: none; it will not be sent via form.
So, having the input and label side by side (and it has to be so for the 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: link
26.12.2015 / 23:59