Как заменить input radio изображением?

Question

[Skaziman]

Подскажите как заменить input radio на свое изображение. И чтобы при этом все работало. К примеру как при выборе способов оплаты на сайтах. Кликаешь на картинку с валютой и тем самым input становиться checked
prntscr.com/di4yyd

Answer 1

[Дмитрий]

https://jsfiddle.net/soledar10/dgd78145/

Comments

[Skaziman]

А как сделать, чтобы при checked открывался определенный div? А при выборе другого input, исчезал. Спасибо!

[Дмитрий]

https://jsfiddle.net/soledar10/dgd78145/1/

Answer 2

[Ksider]

нужно вставить изображение внутрь label, а инпут скрыть

<input type="radio" name="" id="id1">   
<label for="id1"><img src="" alt=""></label>

а чекать в css соответсвующим селектором
input:checked + label > img {}

Comments

[Skaziman]

А как сделать, чтобы при checked открывался определенный div? А при выборе другого input, исчезал. Спасибо!

[Ksider]

input:checked + label > div {display:block}

Answer 3

[Антон Зубарев]

Вот еще интересный пример
jsfiddle.net/4DPyN/4

Comments

[Ksider]

пустые spanы и незакрытый лэйбл, очень интересно!

Answer 4

[Skaziman]

Скажите как сделать, при нажатии на submit отображался текст или картинка? На подобии индикации прогресса