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 :(
 */
.switch {
	height: 5px;
	margin: 0;
    visibility: hidden;
    width: 5px;
}
.switch:not(:checked) + label,
.switch:checked + label {
	appearance: none;
	width: 2em;
	height: 1em;
	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: 1em 1em, auto;
	box-shadow: 0 1px 1px hsla(0,0%,100%,.8);
	transition: .4s background-position;
	text-indent: -999em;
	text-align: left;
	margin-left: -5px;
	display: inline-block;
}
.switch:active + label,
.switch:focus + label {
	background-image: radial-gradient(#ccc, #aaa 60%, #777 62%, transparent 70%),
	                  linear-gradient(#555,#777);
}
.switch:checked + label {
	background-position: right;
}

body {
	background: silver;
}

dabblet.html

<input type="checkbox" id="option" class="switch" /><label for="option">Switch</label>

dabblet.js

// alert('Hello world!');

settings.json

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