Skip to content

Instantly share code, notes, and snippets.

@thriqon

thriqon/jsbin.OtohEzA.css

Created November 20, 2013 23:39
Show Gist options
  • Save thriqon/7573272 to your computer and use it in GitHub Desktop.
Save thriqon/7573272 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.OtohEzA.css
/* With some ideas from ZURB Foundation */
label.switchbox input[type=checkbox]:checked+div:before {
left: calc(100% - 2em);
}
label.switchbox input[type=checkbox]:checked+div {
background: #E1F5D1;
}
label.switchbox {
position: relative;
display: block;
}
label.switchbox input[type=checkbox]+div {
position: absolute;
top: 0px;
width: 100%;
height: 2em;
display: block;
border: 1px solid #B3B3B3;
border-radius: 4px;
background: white;
}
label.switchbox input[type=checkbox]+div:before {
display: block;
content: '';
width: 2em;
height: 2em;
position: absolute;
left: -1px;
top: -1px;
transition: left 0.1s linear 0s, background 0s linear 0.05s;
border-radius: 4px;
border: 1px solid #B3B3B3;
background-image: linear-gradient(to bottom, #FFFFFF 0%, #F2F2F2 100%);
}
label.switchbox input[type=checkbox]+div:after {
content: attr(data-off);
position: absolute;
top: 0px;
line-height: 2em;
height: 2em;
right: 10px;
left: auto;
}
label.switchbox input[type=checkbox]:checked+div:after {
content: attr(data-on);
right: auto;
left: 10px;
}
Raw
jsbin.OtohEzA.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Switchbox</title>
</head>
<body>
<label class="switchbox">
<input type="checkbox" />
<div data-on="On" data-off="Off" />
</label>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment