CSS: Checkbox input trick not working

Question

Consider my HTML

<label for="checkbox"><input id="checkbox" type="checkbox"/></label>
<div class="magic_button">
    <span>Click!</span>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

and my CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
html,body {
    font-family:'Open Sans', sans-serif;
    height:100%;
}
#checkbox, p {
    display:none;
}
.magic_button {
    background:#27ae60;
    padding:6px 10px;
    width:20%;
    margin:0 auto;
    text-align:center;
    color:#fff;
    font-size:16px;
    font-weight:bold;
    position:absolute;
    top:calc(50% - 17px);
    left:0;
    right:0;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    transition:none;
    -webkit-transition:none;
    -moz-transition:none;
}
#checkbox:checked + .magic_button {
    background:#e74c3c;
    left:0;right:0;
    top:0;bottom:0;
    width:100%;
    transition:width 2s;
    -webkit-transition:width 2s;
    -moz-transition:width 2s;
}

I have been following tutorials and I cant for the life of me firgure out why my code isn't working. I know I can certainly use java script for this but I am trying the checkbox trick. I want to have a button vertically and horizontally centered, and when clicked, it needs the width needs to transition and it needs to expand and change colors. Does anyone know how i can get this to work? I also want the button text to disappear and then go to the paragraph text if that's possible. if not, feel free to give me some javascript if it is not pissable.

Answer 1

You need to put the label element inside the .magic_button element. Absolutely position it to fill the entire button, allowing you to click on it and thus toggle the checkbox.

label {
    position:absolute;
    left:0; right:0;
    top:0; bottom:0;
}

That should take care of the main issue. If you want the button text to be hidden after the button is clicked, you will want to target it using the :checked pseudo class and set the display to none. Same goes for the paragraph.

Something like this will work:

#checkbox,
#checkbox:checked + .magic_button span,
.magic_button p {
    display:none;
}
#checkbox:checked + .magic_button p {
    display:block;
}

Example Here

The reason your code wasn't working in the first place was because of the markup.

<label for="checkbox"><input id="checkbox" type="checkbox"/></label>
<div class="magic_button">...</div>

The selector, #checkbox:checked + .magic_button, will select a .magic_button element that is an adjacent, succeeding sibling of the checked element. Since the checkbox is a child of the label element, it wasn't working. Making the input/.magic_button elements adjacent siblings allowing the element to be selected.

As an alternative to absolutely positioning the label element, you could have also wrapped it around the .magic_button element like this. Of course, that means you have to change some of the selectors too.