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.

For one thing, your closing </label> tag isn't a closing </label> tag ... — Pointy
– Pointy, Commented May 13, 2014 at 22:41
The checkbox should be outside the <label> for it to work. — Niet the Dark Absol
– Niet the Dark Absol, Commented May 13, 2014 at 22:43
Also the label needs some content or else there's nothing to click on. — Pointy
– Pointy, Commented May 13, 2014 at 22:54

Josh Crozier · Accepted Answer · 2014-05-13 22:52:19Z

3

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.

edited May 13, 2014 at 22:52

answered May 13, 2014 at 22:43

Josh Crozier

242k56 gold badges401 silver badges316 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Pointy Over a year ago

All that needs to be done to make it work is to add some content to the <label> (so that there's something to click on) and move the <input> out of the <label> so that it's next to the <div>.

Josh Crozier Over a year ago

@Pointy Yea, that would work too. I was under the impression that the OP wanted to be able to click the button to toggle the checkbox. Thus, you could either wrap the element with the label or place the label within it. After all, the button said 'click'.

user3634438 Over a year ago

thanks. This works like a charm! any ideas on how I could make an 'x' at the top when the button is expanded?

Josh Crozier Over a year ago

@user3634438 You could use a pseudo element on the p element like this - jsfiddle.net/6ZM2W

user3634438 Over a year ago

thanks again for all your help I gave you a checkmark

Collectives™ on Stack Overflow

CSS: Checkbox input trick not working

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related