Почему не работает с .class?

Question

[Rem36]

День добрый. Пробую стилизовать чекбокс. С id работает нормально, но с class не работает. Почему?

<label for="dinozavr">
    <input type="checkbox" name="check" class="check">
    ololo
    <span></span>
</label>

label{
    position: relative;
    padding-left: 30px;
    cursor: pointer;
}

.check {
    display: none;
}

.check + span{
    position: absolute;
    left: 0;
    width: 20px;
    height: 20px;
    border: 1px solid #CCB26E;
    display: inline-block;
    border-radius: 3px;
}

.check + span:before{
    content: '';
    position: absolute;
    background: url('pic.svg');
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    top: 1px;
    right: 0;
    left: 2px;
    bottom: 0;
    opacity: 0;
    transition: opacity .3s ease-in-out;
}

.check:checked + span:before{
    opacity: 1;
}

Comments

[godsplan]

Зачем оборачивать в label и писать for=""

[Ankhena]

Если вы инпут оборачиваете в label, то label на него и ссылается.
Когда вы лейблу задаете for, он ищет инпут с таким же id.

В вашем случае, в коде нет инпутов с id="dinozavr" => ничего не срабатывает.

Если вы уберете for из label, то всё будет работать.

[Rem36]

Ankhena, спс сработало

Answer 1

[Pashok Doom]

https://developer.mozilla.org/ru/docs/Web/HTML/Ele...
лейбл в for ссылается на айди

Comments

[Rem36]

Извините. Если чекбоксов несколько, то дублировать стили для разных айди?

[Rem36]

спс

[Pashok Doom]

Rem36, стили к классам цепляй, лейблы к айди, это не взаимоисключающие вещи

Answer 2

[Евгений]

между .check и span находится текст, css правила нужно изменить

.check ~ span{
    position: absolute;
    left: 0;
    width: 20px;
    height: 20px;
    border: 1px solid #CCB26E;
    display: inline-block;
    border-radius: 3px;
}

.check ~ span:before{
    content: '';
    position: absolute;
    background: url('pic.svg');
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    top: 1px;
    right: 0;
    left: 2px;
    bottom: 0;
    opacity: 0;
    transition: opacity .3s ease-in-out;
}

.check:checked ~ span:before{
    opacity: 1;
}

ну и да, у label есть for, в данном случае он не нужен