Can't click input checkbox inside div

Question

For some reason, when putting my label and input inside a div, I can't click them. Here's my point.

#menu {
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    
}

#menu > a {
    color:#212121;
    text-align: center;
    width: 100%;
    background-color: darkorange;
    height: 50px;
    margin-bottom: 1px;
    text-decoration: none;
}

#menu > .button > p {
    font-family: 'Roboto'
}

#menu > a:hover {
    background-color: orangered;
}

#menu > a:visited {
    color:#212121;
}

------------------

.show-menu {
    display: flex;

    justify-content: center;
    width: 100%;
    text-align: center;
    
}

input[type=checkbox] {
    display: none;
}

input[type=checkbox]:checked ~ #menu {
    display: flex;
}

.show-menu {
    display: block;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-decoration: none;
	color: #fff;
	background: #19c589;
	text-align: center;
	padding: 10px 0;
}

<body>
    
    
    
    <div class="open">
         <label for="show-menu" class="show-menu">Show Menu</label>
        <input type="checkbox" id="show-menu" role="button">
    </div>
        
 
    
    <div id="menu">
        <a href="#"><div class="button"><p>HOME</p></div></a>
        <a href="#"><div class="button"><p>ARTICLES</p></div></a>
        <a href="#"> <div class="button"><p>ADVISORS</p></div></a>
        <a href="#"><div class="button"><p>HELP</p></div></a>
    
    </div>
    
    
    
  
    
</body>

But if I use it outside of the .open div, it works. I tried having two of these label and input, one inside and one outside and if I do so, they both work. Still, I just want to use one.

Why is the div not allowing the input to work?

Can you help me?

Thank you!

Terry · Accepted Answer · 2017-05-14 21:33:57Z

Your issue lies with this selector: input[type=checkbox]:checked ~ #menu. Looking at your DOM, you will realise that #menu is not the general sibling of the checkbox, because you have nested the checkbox within a div. CSS does not have the ability to traverse up a DOM tree and check the sibling of the parent—something that you intend to do:

├── div.open
│   ├── label
│   └── input  // input ~ #menu will not select anything
└── div#menu

When you move your <input> element out of its wrapping parent, you are placing it at the same level of #menu, which means your selector will work ;) even if this solution may appear weird, but since your checkbox is perpetually hidden, it really does not matter at which level, and where, it resides in your DOM tree.

├── div.open
│   └── label
├──  input      // input ~ #menu or input + #menu will work ;)
└── div#menu

#menu {
  display: none;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#menu>a {
  color: #212121;
  text-align: center;
  width: 100%;
  background-color: darkorange;
  height: 50px;
  margin-bottom: 1px;
  text-decoration: none;
}

#menu>.button>p {
  font-family: 'Roboto'
}

#menu>a:hover {
  background-color: orangered;
}

#menu>a:visited {
  color: #212121;
}

------------------ .show-menu {
  display: flex;
  justify-content: center;
  width: 100%;
  text-align: center;
}

input[type=checkbox] {
  display: none;
}

input[type=checkbox]:checked~#menu {
  display: flex;
}

.show-menu {
  display: block;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-decoration: none;
  color: #fff;
  background: #19c589;
  text-align: center;
  padding: 10px 0;
}

<div class="open">
  <label for="show-menu" class="show-menu">Show Menu</label>
</div>

<input type="checkbox" id="show-menu" role="button" />

<div id="menu">
  <a href="#">
    <div class="button">
      <p>HOME</p>
    </div>
  </a>
  <a href="#">
    <div class="button">
      <p>ARTICLES</p>
    </div>
  </a>
  <a href="#">
    <div class="button">
      <p>ADVISORS</p>
    </div>
  </a>
  <a href="#">
    <div class="button">
      <p>HELP</p>
    </div>
  </a>

</div>

The other solution is to remove the wrapping <div> around the label + input elements:

├── label
├── input       // input ~ #menu or input + #menu will work ;)
└── div#menu

#menu {
  display: none;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#menu>a {
  color: #212121;
  text-align: center;
  width: 100%;
  background-color: darkorange;
  height: 50px;
  margin-bottom: 1px;
  text-decoration: none;
}

#menu>.button>p {
  font-family: 'Roboto'
}

#menu>a:hover {
  background-color: orangered;
}

#menu>a:visited {
  color: #212121;
}

------------------ .show-menu {
  display: flex;
  justify-content: center;
  width: 100%;
  text-align: center;
}

input[type=checkbox] {
  display: none;
}

input[type=checkbox]:checked~#menu {
  display: flex;
}

.show-menu {
  display: block;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-decoration: none;
  color: #fff;
  background: #19c589;
  text-align: center;
  padding: 10px 0;
}

<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button" />

<div id="menu">
  <a href="#">
    <div class="button">
      <p>HOME</p>
    </div>
  </a>
  <a href="#">
    <div class="button">
      <p>ARTICLES</p>
    </div>
  </a>
  <a href="#">
    <div class="button">
      <p>ADVISORS</p>
    </div>
  </a>
  <a href="#">
    <div class="button">
      <p>HELP</p>
    </div>
  </a>

</div>

Note: If you want to entertain a JS-based solution though, you have more freedom in composing your DOM :)

Thank you so much for the detailed answer! This solved it :D

Chris Happy · Accepted Answer · 2017-05-14 21:24:37Z

It's being checked. Just don't hide the checkbox to see that it works. The problem is that when you put it into the div, the following code doesn't work:

input[type=checkbox]:checked ~ #menu {
    display: flex;
}

This is because the ~ selector selects the element's following sibling, not its parent's following siblings. To make the code work with just CSS & HTML, you either can't put the input & label together or you could move the #menu into the .open div too.

See here for more info and here for an example.

Collectives™ on Stack Overflow

Can't click input checkbox inside div

2 Answers 2

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Related