Checkbox slider avec seulement CSS

dabblet.css

/**
 * Checkbox slider avec seulement CSS
 */
input:checked ~ .checkslide,
input:not(:checked) ~ .checkslide {
	background: #999;
	border: 1px solid #555;
	display: -moz-inline-box; display: inline-block; *display: inline; *zoom: 1;
	height: 30px;
	line-height: 30px;
	position: relative;
	text-align: center;
	vertical-align: middle;
	width: 150px;
}
input:checked ~ .checkslide::before,
input:not(:checked) ~ .checkslide::before {
	background: #2AD;
	content: ' ';
	display: block;
	height: 100%;
	position: absolute;
	top: 0;
	width: 50%;
}
input:checked ~ .checkslide::before {
	width: 100%;
}
input:checked ~ .checkslide::after,
input:not(:checked) ~ .checkslide::after {
	background: #EEE;
	content: ' ' attr(data-unchecked) ' ';
	display: block;
	height: 100%;
	position: absolute;
	top: 0;
	width: 50%;
}
input:checked ~ .checkslide::after {
	content: ' ' attr(data-checked) ' ';
	left: 50%;
}
input:not(:checked) ~ .checkslide::after {
	content: ' ' attr(data-unchecked) ' ';
	left: 0%;
}

/* Démo 2 */
input:checked ~ .checkslide2,
input:not(:checked) ~ .checkslide2 {
	border: 1px solid #555;
	display: -moz-inline-box; display: inline-block; *display: inline; *zoom: 1;
	height: 30px;
	line-height: 30px;
	position: relative;
	text-align: center;
	vertical-align: middle;
	width: 150px;
}
input:checked ~ .checkslide2::before,
input:not(:checked) ~ .checkslide2::before {
	background: #2AD;
	display: block;
	height: 100%;
	position: absolute;
	top: 0;
	width: 50%;
}
input:checked ~ .checkslide2::before {
	background: #2AD;
	content: ' ' attr(data-checked) ' ';
}
input:not(:checked) ~ .checkslide2::before {
	background: #EEE;
	content: ' ';
}
input:checked ~ .checkslide2::after,
input:not(:checked) ~ .checkslide2::after {
	display: block;
	height: 100%;
	left: 50%;
	position: absolute;
	top: 0;
	width: 50%;
}
input:checked ~ .checkslide2::after {
	background: #EEE;
	content: ' ';
}
input:not(:checked) ~ .checkslide2::after {
	background: #999;
	content: ' ' attr(data-unchecked) ' ';
}

/* Démo 3 */
input:checked ~ .checkslide3,
input:not(:checked) ~ .checkslide3 {
	background: #999;
	border: 1px solid #555;
	border-radius: 4px;
	box-shadow: inset 0 8px 16px -8px #000;
	display: -moz-inline-box; display: inline-block; *display: inline; *zoom: 1;
	height: 30px;
	line-height: 30px;
	position: relative;

	text-align: center;
	vertical-align: middle;
	width: 150px;
}
input:checked ~ .checkslide3::before,
input:not(:checked) ~ .checkslide3::before {
	background: #2AD;
	border-radius: 3px;
	box-shadow: inset 0 4px 8px -4px #157;
	content: ' ';
	display: block;
	height: 100%;
	position: absolute;
	top: 0;
	transition: all .2s;
	width: 50%;
}
input:checked ~ .checkslide3::before {
	width: 100%;
}
input:checked ~ .checkslide3::after,
input:not(:checked) ~ .checkslide3::after {
	background: #EEE;
	background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.07));
	border: 1px solid #DDD;
	border-bottom: 3px solid #BBB;
	border-radius: 3px 3px 1px 1px;
	box-shadow: inset 0 1px rgba(255,255,255,.5), inset 0 0 0 1px rgba(255,255,255,.2),0 2px 2px -1px rgba(0,0,0,.6);
	color: #666;
	content: ' ' attr(data-unchecked) ' ';
	cursor: pointer;
	display: block;
	height: 100%;
	margin-left: -1px;
	position: absolute;
	text-shadow: 0 1px #FFF;
	transition: all .2s;
	top: -3px;
	width: 50%;
}
input:checked ~ .checkslide3::after {
	content: ' ' attr(data-checked) ' ';
	left: 50%;
}
input:not(:checked) ~ .checkslide3::after {
	content: ' ' attr(data-unchecked) ' ';
	left: 0%;
}

dabblet.html

<p>
	<label>Exemple 1 <input type="checkbox" /><span class="checkslide" data-checked="on" data-unchecked="off"></span></label>
</p>
<p>
	<label>Exemple 2 <input type="checkbox" /><span class="checkslide2" data-checked="on" data-unchecked="off"></span></label>
</p>
<p>
	<label>Exemple 3 <input type="checkbox" /><span class="checkslide3" data-checked="on" data-unchecked="off"></span></label>
</p>

settings.json

{"view":"split","prefixfree":"1","page":"css"}