- Оберните radio и image в
<label>
- Спрячьте radio кнопку
- Разместите изображение рядом с
hidden radio
, используя селектор
Adjacent sibling selector+
<label>
<input type="radio" name="fb" value="small" />
<img src="fb1.jpg">
</label>
CSS:
label > input{ /* HIDE RADIO */
visibility: hidden; /* Makes input not-clickable */
position: absolute; /* Remove input from document flow */
}
label > input + img{ /* IMAGE STYLES */
cursor:pointer;
border:2px solid transparent;
}
label > input:checked + img{ /* (RADIO CHECKED) IMAGE STYLES */
border:2px solid #f00;
}
Не забудьте добавить класс к вашим labels
, а в CSS
используйте этот класс.
Пользовательские стили и анимации
Вот расширенная версия, использующая элемент <i>
и :after pseudo:
body{color:#444;font:100%/1.4 sans-serif;}
/* CUSTOM RADIO & CHECKBOXES
https://stackoverflow.com/a/17541916/383904 */
.rad,
.ckb{
cursor: pointer;
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}
.rad > input,
.ckb > input{ /* HIDE ORG RADIO & CHECKBOX */
visibility: hidden;
position: absolute;
}
/* RADIO & CHECKBOX STYLES */
.rad > i,
.ckb > i{ /* DEFAULT <i> STYLE */
display: inline-block;
vertical-align: middle;
width: 16px;
height: 16px;
border-radius: 50%;
transition: 0.2s;
box-shadow: inset 0 0 0 8px #fff;
border: 1px solid gray;
background: gray;
}
/* CHECKBOX OVERWRITE STYLES */
.ckb > i {
width: 25px;
border-radius: 3px;
}
.rad:hover > i{ /* HOVER <i> STYLE */
box-shadow: inset 0 0 0 3px #fff;
background: gray;
}
.rad > input:checked + i{ /* (RADIO CHECKED) <i> STYLE */
box-shadow: inset 0 0 0 3px #fff;
background: orange;
}
/* CHECKBOX */
.ckb > input + i:after{
content: "";
display: block;
height: 12px;
width: 12px;
margin: 2px;
border-radius: inherit;
transition: inherit;
background: gray;
}
.ckb > input:checked + i:after{ /* (RADIO CHECKED) <i> STYLE */
margin-left: 11px;
background: orange;
}
<label class="rad">
<input type="radio" name="r1" value="a" />
<i></i> Radio 1
</label>
<label class="rad">
<input type="radio" name="r1" value="b" />
<i></i> Radio 2
</label>
<br>
<label class="ckb">
<input type="checkbox" value="a" />
<i></i> Checkbox 1
</label>
<label class="ckb">
<input type="checkbox" value="b" />
<i></i> Checkbox 2
</label>
jsBin demo 2
Перевод ответа: Use Image instead of radio button @Roko C. Buljan