iOS 7 Checkbox

dabblet.css

/**
 * iOS 7 Checkbox
 */

.fancyChkbox {
	border: 2px solid #e3e3e3; 
	border-radius: 1.5em;
	background: #fff;
	cursor: pointer;
	display: inline-block;
	zoom: 1;
	height: 28px;
	position: relative;
	width: 50px;
	transition: background .3s ease-out;
}
.fancyChkbox.on {
	border-color: #02e266;
	background-color: #02e266;
}
.fancyChkbox .slider {
	border-radius: 50%;
	box-shadow: 0 3px 2px rgba(0,0,0,.2), 0 0 0 1px #e3e3e3;
	display: -moz-inline-stack;
	display: inline-block;
	vertical-align: middle;
	zoom: 1;
	background-color: #fff;
	left: 0;
	position: absolute;
	top: 0;
	width: 28px;
	height: 28px;
	transition: transform .3s cubic-bezier(.45,.45,.42,1.36);
}
.fancyChkbox.on .slider {
	box-shadow: 0 3px 2px rgba(0,0,0,.2);
	transform: translate(22px, 0);
}
.fancyChkbox input {
	display: none;
}

dabblet.html

<div class="fancyChkbox">
	<div class="slider"></div>
	<input type="checkbox">
</div>

dabblet.js

Array.prototype.forEach.call(document.querySelectorAll(".fancyChkbox"), function (chkbox) {
	chkbox.addEventListener("click", function (e) {
		var realChkbox = this.querySelector("input[type=checkbox]");
		if (realChkbox.checked) {
			this.classList.remove("on");
			realChkbox.checked = false;
		} else {
			this.classList.add("on");
			realChkbox.checked = true;
		}
	}, false);
});

settings.json

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