@Rem36

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

День добрый. Пробую стилизовать чекбокс. С 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;
}
  • Вопрос задан
  • 64 просмотра
Пригласить эксперта
Ответы на вопрос 2
Benzin102
@Benzin102
Shitcoder
https://developer.mozilla.org/ru/docs/Web/HTML/Ele...
лейбл в for ссылается на айди
Ответ написан
@Eugeny1987
Работаю с HostCMS
между .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, в данном случае он не нужен
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы