Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A Pen by Brett Diedrich.
<label for="toggle-1">Do Something</label>
<input type="checkbox" id="toggle-1">
<div id="over">Control me</div>
<div id="under"></div>
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
/* For mobile, it's typically better to position checkbox on top of clickable
area and turn opacity to 0 instead. */
}
/* Default State */
div {
background: green;
width: 400px;
height: 100px;
line-height: 100px;
color: white;
text-align: center;
}
/* Toggled State */
input[type=checkbox]:checked ~ #over {
/*background: red;*/
opacity:0;
}
#under{
position:absolute;
top:1;
z-index:-1;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment