Как изменить background у label?

Question

[Юрий]

Как сделать так, чтобы при выборе нужного элемента radio у label менялся фон до тех пор пока не выберут другой элемент
CSS:

.taskradio input[type="radio"] {
            opacity: 0;
            width: 0;
            height: 0;
        }

.taskradio input:checked ~ label.taskradio {
    background: rgba(8, 81, 161, 0.70);
    color: #fff;
}

HTML:

<label class="taskradio">
            <input type="radio" id="radioButton value="radioitem">
             
        </label>

Answer 1

[iBird Rose]

label должен быть либо сиблингом, либо дочерним элементом. В твоем случае никак. Но можешь внутри сделать к примеру div и его уже стилизовать как label. и ему уже менять background
типа так:

<label>
    <input type="radio" id="radioButton value="radioitem">
    <div class="taskradi"></div>
</label>

.input:checked ~ .taskradio {
    background: rgba(8, 81, 161, 0.70);
    color: #fff;
}

Comments

[Юрий]

Тогда будет выделяться только текст, а не label

[iBird Rose]

Юрий, ну тк стилизуй div.taskradi так как будто это label. а label вообще не трогай. пусть просто останется обычной оберткой

[Юрий]

iBird Rose, Я так и сделал

[iBird Rose]

Юрий, в общем. ответ на твой вопрос - нельзя в css обращаться к элементу выше по дереву. вот и исходи из этого

[Юрий]

iBird Rose, Хорошо, спасибо. Буду пробовать

[Юрий]

iBird Rose, Все разобрался, спасибо еще раз)