gracefully degrading switch-style checkboxes

dabblet.css

/**
 * gracefully degrading switch-style checkboxes
 * 		need <label> wrapper and <span> immediatly after checkbox.
 */
 input[type="checkbox"]+span{display:none}
input[type="checkbox"]:not(:checked), 
input[type="checkbox"]:checked { /* :checked here acting as a filter for older browsers */
	display:none;
}
input[type="checkbox"]:not(:checked)+span, 
input[type="checkbox"]:checked+span { /* :checked here acting as a filter for older browsers */
	display:inline-block;
	vertical-align:middle;
	appearance: none;
	width: 2.5em;
	height: 1.4em;
	border: 1px solid rgba(0,0,0,.3);
	border-radius: 999px;
	background: radial-gradient(#e5e5e5, silver 60%, #888 62%, transparent 70%) no-repeat,
	            linear-gradient(#555,#777) gray;
	background-size: 1.25em 1.25em, auto;
	box-shadow: 0 1px 1px hsla(0,0%,100%,.8);
	background-position:0% 50%;
	transition: .4s background-position;
}

input[type="checkbox"]:active+span,
input[type="checkbox"]:focus+span {
	background-image: radial-gradient(#ccc, #aaa 60%, #777 62%, transparent 70%),
	                  linear-gradient(#555,#777);
}

input[type="checkbox"]:checked+span {
	background-position:100% 50%;
}

body {
	background: silver;
}

dabblet.html

<label><input type="checkbox" /><span></span> Checkbox</label>

dabblet.js

// alert('Hello world!');

settings.json

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