Skip to content

Instantly share code, notes, and snippets.

@rsturim
Forked from anonymous/dabblet.css
Created September 27, 2013 07:46
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rsturim/6725364 to your computer and use it in GitHub Desktop.
Save rsturim/6725364 to your computer and use it in GitHub Desktop.
This is the "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;
color:#333;
background: #FFF;border: solid 3px #CCC;
}
/* Toggled State */
input[type=checkbox]:checked ~ div {
background: #ccc;border: solid 3px #999;
}
<label for="toggle-1">
<input type="checkbox" id="toggle-1">
<div>I'm controlled by toggle. No JavaScript!</div>
</label>
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment