CSS checkbox event not working

Question

I'm trying to overlay the page with a div (which be used for a menu), when the checkbox button is checked, but it doesn't seem to work. Is the event not firing?

Jsfiddle here.

HTML

<nav>
    <div id="topBar"></div>
    <div id="menuTab"><input type="checkbox" id="menuToggle">&equiv;</div>
</nav>

<section>
    <div id="slide1" class="slide">
    </div>
</section>

CSS

#menuToggle {
    height: 24px;
    width: 24px;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
    opacity: 0;
}
input#menuToggle:checked + #menuOverlay {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    opacity:0.95;
    z-index: 3;
}
@media only screen and (min-width: 0px) and (max-width: 768px) {
    input#menuToggle:checked + #menuOverlay {
        background:#000;
        height:100%;
    }
}
@media only screen and (min-width: 769px) {
    input#menuToggle:checked + #menuOverlay {
        background:#1f1f1f;
        height:2.4em;
    }
}

Please include your Javascript as well or post this to JSFiddle.net so we can see it not working and fix it. — Scott
– Scott, Commented Oct 21, 2014 at 18:52

Alex Char · Accepted Answer · 2014-10-21 20:30:40Z

You are not using correct + selector.

B + E: Any E element that is the next sibling of a B element (that is: the next child of the same parent)

You don't have any element with id #menuOverlay at all in DOM.

The only way this will work with your current css is the following:

#menuToggle {
    height: 24px;
    width: 24px;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
    opacity: 0;
}
#menuToggle:checked + #menuOverlay {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    opacity:0.95;
    z-index: 3;
}
@media only screen and (min-width: 0px) and (max-width: 768px) {
    input#menuToggle:checked + #menuOverlay {
        background:#000;
        height:100%;
    }
}
@media only screen and (min-width: 769px) {
    input#menuToggle:checked + #menuOverlay {
        background:#1f1f1f;
        width:100%;
        height:100%;
    }
}

<nav>
    <div id="topBar"></div>
    <div id="menuTab">
        <input type="checkbox" id="menuToggle" />&equiv;
        <div id="menuOverlay"></div> <!-- add div element here with id menuOverlay -->
    </div>
</nav>
<section>
    <div id="slide1" class="slide"></div>
</section>

Mathieu Labrie Parent · Accepted Answer · 2014-10-21 19:03:56Z

2

Whit the menuOverlay properly added :

http://jsfiddle.net/e230cpwz/1/

<div id="menuTab"><input type="checkbox" id="menuToggle" />&equiv;
    <div id="menuOverlay" >
    </div>
</div>

answered Oct 21, 2014 at 19:03

Mathieu Labrie Parent

2,6061 gold badge12 silver badges10 bronze badges

Collectives™ on Stack Overflow

CSS checkbox event not working

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related