Skip to content

Instantly share code, notes, and snippets.

@LeaVerou
Created March 4, 2013 00:01
Show Gist options
  • Save LeaVerou/5078981 to your computer and use it in GitHub Desktop.
Save LeaVerou/5078981 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"}
@ecleel
Copy link

ecleel commented Mar 12, 2013

How I can see this in dabblet?
there is no url. I guess it will be great if it add the dabblet url in the top of css comments.

@kkxlkkxllb
Copy link

the url rule is http://dabblet.com/gist/:gist_id . So you can see the demo at http://dabblet.com/gist/5078981
yeah, i saw the pretty switch.

@ecleel
Copy link

ecleel commented Mar 13, 2013

Thanks @kkxlkkxllb
I dont know about url thing :)

@levito
Copy link

levito commented Mar 13, 2013

I love it! For IE10 compatibility you should add padding-left: 0 to input[type="checkbox"].switch + div. It doesn't transition from nothing to a value. Like so: http://dabblet.com/gist/5154951

@jessefrye
Copy link

I was messing with your dabblet and removed :not(:checked) and :checked from the first selector and kept just input[type=checkbox] then removed all instances input[type=checkbox] that preceded .switch and the dabblet still worked. I'm curious if you over qualified the selectors for the purpose of the demo or if there is a cross-device or cross-platform advantage of writing it that way? (btw I really love how the slide waits for the tap. very clean)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment