Toggle Switch Checkbox

by Juan Muñoz

HTML

<h5>Toggle Switch</h5>
<label class="switch">
	<input type="checkbox" />
	<span class="knob"></span>
</label>
<hr />
<h5>WebKit-only, single element switch</h5>
<input type="checkbox" class="webkit-switch" />

SCSS

$fontSize                            : 15px;
$inputFontSize                       : $fontSize - 2;
$lineHeight                          : 1.5;
$inputLineHeight                     : 1.24;
$white                               : #FFF;
$green                               : #9bca3e;
$formInputHeight                     : (($fontSize+2) * 2);
$formBg                              : $white;
$formBorderColor                     : #999;

body{ font-family: Helvetica, Arial, sans-serif; padding: 10px; }
h5{ margin-bottom: 0.5em }

.switch{
	$switchWidth: 80px;

	background-color: $formBg;
	border: 1px solid $formBorderColor;
    border-radius: 2px;
	color: $white;
	cursor: pointer;
    display: inline-block;
	font-size: 0;
	height: $formInputHeight;
	overflow: hidden;
	margin: 0;
	padding: 0;
	position: relative;
	width: $switchWidth;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;

	&:after,
	&:before{
		background-color: $green;
		color: $white;
		content : "On";
        display: block;
		font-size: $inputFontSize;
		line-height: $lineHeight;
		height: 100%;
		left: 0;
		padding: 7px 0;
		position: absolute;
		text-align: center;
		top: 0;
		width: 51%; /* This is so the darker color doesn't show through the rounded corners of the knob */
	}

	&:before{
		background-color: $formBorderColor;
		content : "Off";
		left: auto;
		right: 0;
		width: 50%;
	}

	.knob{
		background: darken($formBg, 3%);
		border: 1px solid $formBorderColor;
		border-bottom: none;
		border-top: none;
        border-radius: 2px;
		display: block;
		font-size: $inputFontSize;
		height: 100%;
		left: -1px;
		position: relative;
		top: 0;
		width: $switchWidth/2;
		z-index: 2;
		
        -webkit-transition: all 0.15s ease;
        -moz-transition: all 0.15s ease;
        -ms-transition: all 0.15s ease;
        transition: all 0.15s ease;

		&:before,
		&:after{
			border: 4px solid transparent;
			border-left-color: inherit;
			content : "";
			display:...