Skip to content

Instantly share code, notes, and snippets.

Forked from LeaVerou/dabblet.css
Created March 15, 2013 21:53
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 dtipson/5173366 to your computer and use it in GitHub Desktop.
Save dtipson/5173366 to your computer and use it in GitHub Desktop.
Switch-style checkboxes.
* Switch-style checkboxes.
* Inspired by Espresso’s “Tools” switch
input[type="checkbox"]:checked { /* :checked here acting as a filter for older browsers */
position: absolute;
opacity: 0;
label {
position: relative;
display: inline-block;
margin: 0 1em 1em 0;
font: 75% sans-serif;
text-shadow: 0 1px 1px white;
input[type="checkbox"].switch + div {
width: 1.8em; height: 1em;
border: 1px solid rgba(0,0,0,.3);
border-radius: 999px;
margin: 0 auto .8em;
background: #888;
background-image: linear-gradient(rgba(0,0,0,.4), transparent);
background-origin: border-box;
background-clip: border-box;
box-shadow: 0 1px 1px hsla(0,0%,100%,.8);
overflow: hidden;
transition-duration: .4s;
transition-property: padding, width;
input[type="checkbox"].switch:checked + div {
padding-left: .8em;
width: 1em;
input[type="checkbox"].switch + div:before {
content: '';
display: block;
width: 1em; height: 1em;
margin: -1px;
border: 1px solid rgba(0,0,0,.7);
border-radius: inherit;
background: #c4c4c4;
background-image: linear-gradient(hsla(0,0%,100%,.3), hsla(0,0%,100%,0));
box-shadow: 0 0 .5em rgba(0,0,0,.5),
0 .2em hsla(0,0%,100%,.3) inset,
0 -.1em .3em hsla(0,0%,0%,.2) inset;
input[type="checkbox"].switch:active + div:before {
background-color: #aaa;
input[type="checkbox"].switch:focus + div {
box-shadow: 0 0 .3em 1px red,
0 1px 1px hsla(0,0%,100%,.8);
body {
padding: 1em;
background: silver;
<label><input type="checkbox" class="switch" />Tools</label>
<label><input type="checkbox" class="switch" checked />Tools</label>
<h2>With larger font-size</h2>
<label style="font-size:200%"><input type="checkbox" class="switch" />Tools</label>
<label style="font-size:200%"><input type="checkbox" class="switch" checked />Tools</label>
var switches = document.querySelectorAll('input[type="checkbox"].switch');
for (var i=0, sw; sw = switches[i++]; ) {
var div = document.createElement('div');
div.className = 'switch';
sw.parentNode.insertBefore(div, sw.nextSibling);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment