почему label не реагирует на стили?
Подскажите почему не реагирует на стили label? По разметке не кричите, так сделано в плагине, пытаюсь его изменить.
Стили для чекбокса
.checkbox {
display: flex;
position: relative;
}
.checkbox > input {
position: absolute;
z-index: -1;
opacity: 0;
}
.checkbox::after {
content: "";
display: block;
position: absolute;
width: 14px;
height: 14px;
left: 3px;
top: 8px;
border-radius: 3px;
background-color: #D35932;
opacity: 0;
transition: opacity linear 0.15s;
}
.checkbox::before {
content: "";
display: block;
width: 20px;
height: 20px;
border: 1px solid #D35932;
border-radius: 3px;
margin-top: 5px;
margin-right: 15px;
}
.checkbox input:checked + .checkbox::after {
opacity: 1;
}
.checkbox input:checked {
display: none !important;
}
html
<label class="checkbox">
::before
<input type="checkbox" name="leyka_agree" class="leyka_agree required" value="1" id="leyka_agree">
<span class="leyka-checkbox-label"> Соглашаюсь с <a class="leyka-legal-terms-trigger" href="#"> офертой
</a>
</span>
::after
</label>
после нажатия after не появляется, даже добавил проверку без плюса все работает, проблема именно когда input:checked + .checkbox::after
Ответы (1 шт):
Автор решения: Кирилл
→ Ссылка
В css нет такого селектора чтобы при состоянии дочернего элемента изменять состоянии родительского. Но зато можно менять вложенные элементы или элементы которые находятся у одного родителя (siblings).
Ваш исправленный пример: codepen.io/kirya-dev/pen/poNNLJq