CSS3 checkbox

dabblet.css

/* CSS3 checkbox */
/* don't works on firefox :-( */
input[type=checkbox]{
	position:relative;
	display:inline-block;
	width    : 40px;
	height   : 40px;
	font-size: 40px;
	background:#009;
	visibility:hidden;
	line-height:1;
	text-align:center;
	vertical-align:top;
	margin:0;
	padding:0;
	left:0;
	right:100%;
	transition:right .4s ease;
}
input[type=checkbox]:checked{
	right:0;
}
input[type=checkbox]:before{
	content:'☑';
	display:block;
	position:absolute;
	top:0;
	left:0;
	right:inherit;
	overflow:hidden;
	bottom:0;
	visibility:visible;
	
}
input[type=checkbox]:after{
	content:'☐';
	display:block;
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:rgba(0,0,0,.1);
	visibility:visible;
}
input[type=checkbox]:checked:before{
	width:1;
}

dabblet.html

<input type="checkbox">

settings.json

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