Как заставить input radio checked?

Question

[Andrey Vasilev]

Добрый день всем.

Пытаюсь настроить кастомные radio кнопки.
Основные скрыл, через before поставил нужные, но теперь не могу сделать им checked. Куда не ставил событие не происходит. Нужно чтобы при нажатии кружок закрашивало любым цветом.

Codepen: https://codepen.io/Nolis/pen/abomaYp

Comments

[FeST1VaL]

Как и ответили многие ставить на label id инпута т.е <label for="first"> и в стилях что то похожее на

input[type="radio"]:checked + label:before {
        background: red;
    }

Answer 1

[hzzzzl]

<input type="radio" name="programms" id="first">
<label>
	<span class="it-idv-slider-radio__text">Профилактика компонентов системного блока             300р</span>
</label>

ну для начала точно надо привязать лейбл к инпуту, чтобы можно было нажать на лейбл, и инпут становился checked

а потом через css менять before у лейбла
https://codepen.io/manabox/pen/raQmpL

Answer 2

[y0u]

https://jsfiddle.net/y0u/r4xyhk3a/

Answer 3

[Artur Lastname]

При нажатии куда?
Для начала надо тегу добавлять аттрибут - for=#id
Тогда по клику на лейбл хотя бы чек будет происходить.

Comments

[alekseyHunter]

думаю на псевдо чекбокс, т.е. лейбл.

[Artur Lastname]

alekseyHunter, ну это по сути и есть .