Use Thumbnail Image instead of radio button

Use Thumbnail Image instead of radio button

by Avinashullal

HTML

<label class="fb" for="fb1">
    <input id="fb1" type="radio" name="fb" value="small" />
    <img src="http://placehold.it/20x20/35d/fff&text=f">
</label>
<label class="fb" for="fb2">
    <input id="fb2" type="radio" name="fb" value="big" />
    <img src="http://placehold.it/40x60/35d/fff&text=f">
</label>
<label class="fb" for="fb3">
    <input id="fb3" type="radio" name="fb" value="med" />
    <img src="http://placehold.it/40x40/35d/fff&text=f">
</label>
<label class="fb" for="fb4">
    <input id="fb4" type="radio" name="fb" value="long" />
    <img src="http://placehold.it/60x15/35d/fff&text=f">
</label>

CSS

.fb > input[type=radio] {
    display:none;
}
input[type=radio] + img {
    cursor:pointer;
    border:2px solid transparent;
}
input[type=radio]:checked + img {
    border:2px solid #f00;
}