How do I make a element visible when checkbox is checked using CSS only

Question

I have a navigation bar and a background (class="modal") which are set to

display: none;

How do I make it

display: block;

when the input checkbox menu-check is checked using only CSS.

[I have only shown the class modal since both navigation and modal classes act similarly]

.modal {
  display: none;
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  background: #00827f;
}

.menu-btn {
  position: fixed;
  display: flex;
  flex-direction: column;
  gap: 5px;
  bottom: 20px;
  right: 20px;
  padding: 15px;
  border-radius: 20px;
  z-index: 10;
  background-color: #08ccc9;
  cursor: pointer;
}

.menu-btn:hover>span:nth-of-type(1) {
  transform-origin: right;
  transform: scaleX(0.5);
}

.menu-btn:hover>span:nth-of-type(3) {
  transform-origin: left;
  transform: scaleX(0.5);
}

.menu-btn input {
  display: none;
}

.menu-btn span {
  width: 25px;
  height: 4px;
  border-radius: 999px;
  background-color: black;
  transition: all 0.3s ease;
}

.menu-btn input:checked~span:nth-of-type(1) {
  transform: rotate(45deg) translate(5px, 7px);
  transform-origin: center;
  transition: all 0.3s ease, transform-origin 0s;
}

.menu-btn input:checked~span:nth-of-type(2) {
  transform: translate(30px, 0px);
  opacity: 0;
}

.menu-btn input:checked~span:nth-of-type(3) {
  transform: rotate(-45deg) translate(5px, -7px);
  transform-origin: center;
  transition: all 0.3s ease, transform-origin 0s;
}

<label for="menu-check" class="menu-btn">
  <input type="checkbox" id="menu-check">
  <span></span>
  <span></span>
  <span></span>
</label>
<div class="modal"></div>

With your current markup you can't do this with CSS alone. You will need to move the checkbox so it is a previous sibling to the modal — Jon P, Aug 08 '22 at 03:02
Any suggestions on how it could be done? Most of the ways I tried didn't work. — DEXOW, Aug 08 '22 at 03:20

score 1 · Accepted Answer · answered Aug 08 '22 at 03:38

You need to change your HTML so that the checkbox is at the same level in the DOM as the modal. You can only select subsequent or child elements, not previous or ancestral elements.

#menu-check {display:none;}

.modal {
  display: none;
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  background: #00827f;
}



.menu-btn {
  position: fixed;
  display: flex;
  flex-direction: column;
  gap: 5px;
  bottom: 20px;
  right: 20px;
  padding: 15px;
  border-radius: 20px;
  z-index: 10;
  background-color: #08ccc9;
  cursor: pointer;
}

.menu-btn:hover>span:nth-of-type(1) {
  transform-origin: right;
  transform: scaleX(0.5);
}

.menu-btn:hover>span:nth-of-type(3) {
  transform-origin: left;
  transform: scaleX(0.5);
}



.menu-btn span {
  width: 25px;
  height: 4px;
  border-radius: 999px;
  background-color: black;
  transition: all 0.3s ease;
}

/*Check Box CSS Manipulation*/
#menu-check:checked ~ .modal{
display:block;
}

#menu-check:checked ~ .menu-btn span:nth-of-type(1) {
  transform: rotate(45deg) translate(5px, 7px);
  transform-origin: center;
  transition: all 0.3s ease, transform-origin 0s;
}

#menu-check:checked ~ .menu-btn span:nth-of-type(2) {
  transform: translate(30px, 0px);
  opacity: 0;
}

#menu-check:checked ~ .menu-btn span:nth-of-type(3) {
  transform: rotate(-45deg) translate(5px, -7px);
  transform-origin: center;
  transition: all 0.3s ease, transform-origin 0s;
}

<input type="checkbox" id="menu-check">
<label for="menu-check" class="menu-btn">
  <span></span>
  <span></span>
  <span></span>
</label>
<div class="modal"></div>

How do I make a element visible when checkbox is checked using CSS only

1 Answers1