iOS7 style checkbox and radio

dabblet.css

/*
 * iOS7 style checkbox and radio
 */
body {
  margin:30px;
}
input[type=checkbox], input[type=radio] {
	appearance: none;
  -webkit-appearance: none;
	box-shadow: inset 0px 0px 0px 1px #e6e6e6;
	border-radius: 15px;
	background-color: #fff;
	padding: 1px;
	display: inline-block;
	width: 52px;
	height: 31px;
	position: relative;
	cursor: pointer;
	transition: all .3s ease-out;
	margin: 0px;
  transform: scale(1);
  -webkit-transform: scale(1); /* Adjust size here */
}
input[type=checkbox]:checked, input[type=radio]:checked {
	box-shadow: inset 0px 0px 0px 20px #53d76a;
}
input[type=checkbox]:after, input[type=radio]:after {
	content: '';
	position: absolute;
	width: 29px;
	height: 29px;
	border-radius: 15px;
	box-shadow: 0px 2px 2px 1px rgba(0,0,0,.2);
	cursor: pointer;
	background-color: #fff;
	transition: all 0.1s ease-in .1s;
}
input[type="checkbox"]:checked:after,input[type="radio"]:checked:after {
	left: 22px;
}
input {
	outline: none;
}

dabblet.html

<h1>Checkbox :</h1>  
<input type="checkbox" />
<input type="checkbox" checked />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<h1>Radio :</h1>
<input type="radio" name="group" />
<input type="radio" name="group" checked />
<input type="radio" name="group" />
<input type="radio" name="group" />
<input type="radio" name="group" />

dabblet.js

// alert('Hello world!');

settings.json

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