Skip to content

Instantly share code, notes, and snippets.

@dtipson
Forked from LeaVerou/dabblet.css
Created September 10, 2014 15:45
Show Gist options
  • Save dtipson/df46d238e1a4eccedaf4 to your computer and use it in GitHub Desktop.
Save dtipson/df46d238e1a4eccedaf4 to your computer and use it in GitHub Desktop.
Switch-style checkboxes.
/**
* Switch-style checkboxes.
* Inspired by Espresso’s “Tools” switch
*/
input[type="checkbox"]:not(:checked),
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;
}
<h2>Smaller</h2>
<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);
}
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment