<input id="0" type="radio" name="sex" value="0"/><label for="0" class="small">Мужской</label> <input id="1" type="radio" name="sex" value="1"/><label for="1" class="small">Женский</label>
/* 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 #f00; }
<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>