Skip to content

Instantly share code, notes, and snippets.

@chriscoyier
Created December 21, 2011 16:00
Show Gist options
  • Save chriscoyier/1506530 to your computer and use it in GitHub Desktop.
Save chriscoyier/1506530 to your computer and use it in GitHub Desktop.
Checkbox Hack
/* Checkbox Hack */
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}
label {
-webkit-appearance: push-button;
-moz-appearance: button;
display: inline-block;
margin: 60px 0 10px 0;
cursor: pointer;
}
/* Default State */
div {
background: green;
width: 400px;
height: 100px;
line-height: 100px;
color: white;
text-align: center;
}
/* Toggled State */
input[type=checkbox]:checked ~ div {
background: red;
}
<label for="toggle-1">I'm a toggle</label>
<input type="checkbox" id="toggle-1">
<div>I'm controlled by toggle. No JavaScript!</div>
{"view":"split-vertical","prefixfree":"1","page":"css"}
@enrikpavdeja
Copy link

Hi there,

Was just having a look at this.

Is there a way to have any of the buttons toggle all of the divs?

So just like one button toggles the two divs when you're using ~, is there a way to select by button class so that any button controls all divs? Is something like that possible??

Thanks,
Enrik

@Mottie
Copy link

Mottie commented Aug 8, 2014

Hi @enrikpavdeja!

If you add a new label & input:

<label for="toggle-all">I toggle all</label>
<input type="checkbox" id="toggle-all">

then modify the toggled state definition:

/* Toggled State */
input[type=checkbox]:checked + div, #toggle-all:checked ~ div {
   background: red;
}

Updated demo

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment