Switch [CSS]

dabblet.css

/**
 * Switch [CSS]
 */
html {
	background: linear-gradient(#ccc, #eee);
	min-height: 100%;
}


/* Switch */
input[type="checkbox"] {
	position:relative;
	
	display:-moz-inline-stack;
	display:inline-block;
	zoom:1;
	*display:inline;
	
	margin:0 20px 20px 0;
	
	background-image:
	linear-gradient(left, #ccc 50%, #3E9BE6 50%);

	background-size: 150% 100%;
	background-position: 15px 0;
	cursor: pointer;
	padding-right: 14px;
	width: 32px;
	height: 12px;  
	border: 1px solid #888;
	border-radius:10px;

	box-shadow:
	inset 0 1px 2px 0 rgba(0, 0, 0, 0.2),
	0 1px 0 0 rgba(255, 255, 255, 0.75);

	-webkit-appearance: none;
	transition: .2s;
}

input[type="checkbox"]:after {
	content: '';
	display: block;
	height: 16px;
	width: 16px;
	right: -2px;
	top: -4px;
	z-index: 4;
	border: 1px solid #888;
	border-radius: 10px;
	background-color: #f7f7f7;
 	background-clip:content-box;
	background-image:
	linear-gradient(top, #f7f7f7, #eee);  

	box-shadow:
	inset 0 1px 2px rgba(255, 255, 255, 1.0),
	0 1px 1px rgba(0, 0, 0, 0.2);

	left:-1px;
	position:relative;
}

input[type="checkbox"]:checked {
	background-position: 16px 0;
	padding-left: 14px;
	padding-right: 0;
	border: 1px solid #355279;
}

input[type="checkbox"].dot:before {
	content:'';
	display:block;
	height:8px;
	width:8px;
	border-radius:10px;
	top:50%;
	left:50%;
	margin:-4px;
	position:relative;
	
	box-shadow:
	inset 0 1px 2px 0 rgba(0,0,0,0.8),
	0 1px 0 0 white;
	
	background:#888;
	z-index:5;
}


/* DEMO */
.wrapper {
	position:absolute;
	width:400px;
	height:300px;
	top:50%;
	left:50%;
	margin:-150px -200px;
}

.inner.wrapper {
	position:absolute;
	width:350px;
	height:250px;
	top:50%;
	left:50%;
	padding-top:100px;
	margin:-125px -175px;
}

dabblet.html

<div class="wrapper">
<div class="inner wrapper">
<input type="checkbox">
<input type="checkbox" class="dot">
</div>
</div>

settings.json

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