<style>

form {
		width: 80px;
		margin: 0 auto 55px;
		text-align: left;
	}
form p { margin: 15px 0; }
/*
		Demo CSS code
	*/
	
	[type="checkbox"]:not(:checked),
	[type="checkbox"]:checked {
		position: absolute;
		left: -9999px;
	}
	[type="checkbox"]:not(:checked) + label,
	[type="checkbox"]:checked + label {
		position: relative;
		padding-left: 75px;
		cursor: pointer;
	}
	[type="checkbox"]:not(:checked) + label:before,
	[type="checkbox"]:checked + label:before,
	[type="checkbox"]:not(:checked) + label:after,
	[type="checkbox"]:checked + label:after {
		content: '';
		position: absolute;
	}
	[type="checkbox"]:not(:checked) + label:before,
	[type="checkbox"]:checked + label:before {
		left:0; top: -3px;
		width: 65px; height: 30px;
		background: #DDDDDD;
		border-radius: 15px;
		-webkit-transition: background-color .2s;
		-moz-transition: background-color .2s;
		-ms-transition: background-color .2s;
		transition: background-color .2s;
	}
	[type="checkbox"]:not(:checked) + label:after,
	[type="checkbox"]:checked + label:after {
		width: 20px; height: 20px;
		-webkit-transition: all .2s;
		-moz-transition: all .2s;
		-ms-transition: all .2s;
		transition: all .2s;
		border-radius: 50%;
		background: #7F8C9A;
		top: 2px; left: 5px;
	}

	/* on checked */
	[type="checkbox"]:checked + label:before {
	/*	background:#DDDDDD; */
	}
	[type="checkbox"]:checked + label:after {
		background: #7BBA3D;
		top: 2px; left: 40px;
	}

	[type="checkbox"]:checked + label .ui,
	[type="checkbox"]:not(:checked) + label .ui:before,
	[type="checkbox"]:checked + label .ui:after {
		position: absolute;
		left: 6px;
		width: 65px;
		border-radius: 15px;
		font-size: 14px;
		font-weight: bold;
		line-height: 22px;
		-webkit-transition: all .2s;
		-moz-transition: all .2s;
		-ms-transition: all .2s;
		transition: all .2s;
	}
	[type="checkbox"]:not(:checked) + label .ui:before {
		content: "no";
		left: 32px
	}
	[type="checkbox"]:checked + label .ui:after {
		content: "yes";
		color: #7BBA3D;
	}
	[type="checkbox"]:focus + label:before {
		/*border: 1px dashed #777;*/
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
		margin-top: -1px;
	}

	</style>