Доброй ночи, Господа! Кто может помочь с изменением цвета у крестика бургера? Пробовал через active (css), что-то не вышло...
body {
background: red;
}
.mobile-menu__btn {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
cursor: pointer;
transition: .4s;
z-index: 1;
margin-top: 20px;
}
.mobile-menu__icon {
display: block;
position: relative;
background: white;
width: 90%;
height: 2px;
transition: .4s;
}
.mobile-menu__icon::after,
.mobile-menu__icon::before {
content: "";
display: block;
position: absolute;
background: white;
width: 100%;
height: 2px;
transition: .4s;
}
.mobile-menu__icon::after {
top: 8px;
}
.mobile-menu__icon::before {
top: -8px;
}
.mobile-menu__checkbox {
display: none;
}
.mobile-menu__checkbox:checked~.mobile-menu__nav {
opacity: 1;
}
.mobile-menu__checkbox:checked~.mobile-menu__container {
height: 100%;
z-index: -1;
}
.mobile-menu__checkbox:checked~.mobile-menu__btn .mobile-menu__icon {
background: transparent;
}
.mobile-menu__checkbox:checked~.mobile-menu__btn .mobile-menu__icon::before,
.mobile-menu__checkbox:checked~.mobile-menu__btn .mobile-menu__icon::after {
top: 0;
}
.mobile-menu__checkbox:checked~.mobile-menu__btn .mobile-menu__icon::after {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.mobile-menu__checkbox:checked~.mobile-menu__btn .mobile-menu__icon::before {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
<input type="checkbox" id="checkbox" class="mobile-menu__checkbox">
<label for="checkbox" class="mobile-menu__btn"><div class="mobile-menu__icon"></div></label>
Заранее благодарю!