Checkbox Hack

dabblet.css

/* Checkbox Hack */

input[type=checkbox] {
   position: absolute;
   top: -9999px;
   left: -9999px;
}
label { 
  display: inline-block;
  margin: 60px 0 10px 0;
  cursor: pointer;
  border: 2px solid transparent;
}
input[type=checkbox]:checked ~ label {
	border-color: red;
	margin-bottom: 60px;
}

/* Default State */
div {
   width: 400px;
   height: 100px;
   line-height: 100px;
   color: white;
   text-align: center;
}
div.first {
   background: red;
}
div.second{
   background: green;
}

/* Toggled State */
input[type=checkbox]:checked ~ div.first {
   background: green;
}
input[type=checkbox]:checked ~ div.second {
   background: red;
}

dabblet.html

<input type="checkbox" id="toggle-1">
<label for="toggle-1">I'm a toggle</label>
<div class="first">I'm controlled by toggle. No JavaScript!</div>
<div class="second">I'm controlled by toggle. No JavaScript!</div>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}