Как сделать кнопку закрыть белого цвета?

Question

[Максим Герасименко]

Есть мобильное меню с кнопкой бургер и кнопкой крестиком - X. Кнопка X соответственно отвечает за закрытие меню.
Нужно сам X сделать белого цвета, а фон вокруг X синего.
Не получается это сделать. У меня при смене цвета и background - а меняется цвет X и цвет бургера одновременно.
https://jsfiddle.net/veduoa8t/1/

Answer 1

[kryamk]

#menu__toggle:checked ~ .menu__btn {
	background: blue;
	left: 232px;
}
#menu__toggle:checked ~ .menu__btn > span,
#menu__toggle:checked ~ .menu__btn > span::before,
#menu__toggle:checked ~ .menu__btn > span::after {
  background-color: white;
  left: 0;
 }

Answer 2

[Никита Михайлов]

Ну ведь уже есть по похожему принципу. Для span при открытом состоянии меню можно отходить от пседокласса checked

#menu__toggle:checked ~ .menu__btn > span,
#menu__toggle:checked ~ .menu__btn > span::before,
#menu__toggle:checked ~ .menu__btn > span::after {
  background-color: blue;
 }

Comments

[Максим Герасименко]

Если делать так то сам X становиться голубым.
А нужно что бы X был белым. А фон вокруг него голубым. Те. вот так: