Failed attempt at gracefully degrading switch-style checkboxes

dabblet.css

/**
 * Failed attempt at gracefully degrading switch-style checkboxes
 * 		without pseudoelements (which shouldn’t exist on replaced elements) and extra elements.
 * Inspired by Espresso’s “Tools” switch
 * DO NOT USE. Currently only works properly in WebKit :(
 */

input[type="checkbox"]:not(:checked), 
input[type="checkbox"]:checked { /* :checked here acting as a filter for older browsers */
	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 center left,
	            linear-gradient(#555,#777) gray;
	background-size: 1.25em 1.25em, auto;
	box-shadow: 0 1px 1px hsla(0,0%,100%,.8);
	transition: .4s background-position;
}

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

input[type="checkbox"]:checked {
	background-position: right;
}

body {
	background: silver;
}

dabblet.html

<input type="checkbox" />

dabblet.js

// alert('Hello world!');

settings.json

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