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

user_15940998 0
Viewed 34

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>

css html
1 Answers

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>

user_46650
Related