Switch-style checkboxes.

dabblet.css

/**
 * 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;
}

dabblet.html

<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>

dabblet.js

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);
}

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}

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.

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.

Thanks @kkxlkkxllb
I dont know about url thing :)

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

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)