Как сделать свой input radio вместо «кружочка и точечки»?

Question

[Евгений]

Всем привет! Есть какой-нибудь простой и рабочий способ стилизовать Radio-кнопки через css? Сделать нужно что-то типа prntscr.com/2jb06q
Обе картинки «пальца» изначально серые при выборе идёт смена картинки на зелёный, либо красный.

Answer 1

[Сергей Протько]

jsfiddle.net/j4BTz

суть вы должны понять. Разные картинки можно задать классом у label. фон задать у span и менять его в зависимости от состояния инпута.

Answer 2

[itspers]

Ну сами радиобаттоны не дизайнятся, но можно их скрыть и задизайнить рядом лежащий label под пальцы. Тогда клики будут продолжать работать и без джаваскрипта.

Comments

[Евгений]

@itspers то есть как-бы наложить на них картинки сверху?

[itspers]

@justasinner не сверху, а прямо в фон
webdesign.tutsplus.com/tutorials/htmlcss-tutorials...

Answer 3

[exdeniz]

Самый простой способ использовать iCheck.
Два класса в css и две строчки в html

codepen.io/exdeniz/pen/sIihf

Answer 4

[Виталий Желтяков]

Простого способа сделать это через css не существует. Но зато есть тысячи js-плагинов кастомизации селектов

Comments

[Сергей Протько]

ой да ладно... jsfiddle.net/j4BTz

[Павел Гоголинский]

не не не

[Евгений]

@gogolinsky ну квадратики, кружки это ладно, а ты сможешь сделать так «лайки»?

[Павел Гоголинский]

@justasinner form input[type="checkbox"]+label - в background темный палец, form input[type="checkbox"]:checked+label - в background светлый палец.

[Евгений]

@gogolinsky сори, я это не тебе адресовал, если что, а первому)