Почему не работает input type="radio"?

Question

[date_step_end]

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

<div class="product__radio-btns">
                    <input type="radio" name="radios">
                    <span class="custom-radio" style="--radio-color: rgba(255, 255, 255, 1)"></span>
                    
                    <input type="radio" name="radios" checked>
                    <span class="custom-radio" style="--radio-color: rgba(0, 0, 0, 1)"></span> 
                    
                    <input type="radio" name="radios">
                    <span class="custom-radio" style="--radio-color: rgba(9, 15, 151, 1)"></span>

                    <input type="radio" name="radios">
                    <span class="custom-radio" style="--radio-color: rgba(239, 205, 152, 1)"></span>
        </div>

.product__radio-btns {
    display: flex;
    gap: 6px;
}

.product__radio-btns input[type="radio"] {
  display: none;
}

.custom-radio {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 1px solid white;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
}

.custom-radio::before {
    content: '';
    display: block;
    width: 6px; 
    height: 6px; 
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    transition: background-color 0.3s;
    background-color: var(--radio-color);
}

input[type="radio"]:checked + .custom-radio {
    border-color: var(--radio-color);
}

Comments

[Lynn «Кофеман»]

ну так сами инпуты скрыты, на них нельзя кликнуть, конечно ничего не работает.

[Ankhena]

В современном мире уже не нужен этот дикий способ и пустым спаном или псевдо от лейбла.

Можно задать радио и чекбоксам appearance: none и стилизовать их напрямую.
Очень удобно. Даже псевдоэлементы появляются.

В любом случае, нельзя скрывать инпуты через display: none. Гуглите доступное скрытие или visually-hidden.
А также нужны лейблы с вменяемым текстом.

Answer 1

[apoca1ipsis]

В label оберните

<label>
      <input type="radio" name="radios">
      <span class="custom-radio" style="--radio-color: rgba(255, 255, 255, 1)"></span>
    </label>

Comments

[date_step_end]

спасибо!

[Иван Кулаков]

date_step_end, либо просто в form

[Ankhena]

Иван Кулаков, форма никак не поможет кликабельности скрытых инпутов..

[Ankhena]

Иван Кулаков, кажется вы не поняли, что происходит в вопросе.

В вашем коде вообще нет скрытых через display: none инпутов.

[Иван Кулаков]

Ankhena, сорри, действительно не увидел, что display: none у кнопок xD