CSS: checkbox switch

Jednoduché řešení CSS přepínače checkboxů. Oproti mnoha jiným řešením se toto vyznačuje svojí jednoduchostí bez nutnosti složitého obalování elementu inputu.

Celá ukázka je dostupná na Codepenu: https://codepen.io/lukashron/pen/WNXErrv

HTML

<input type="checkbox" name="exampleInput" class="input-switch">
<input type="checkbox" name="exampleInput" class="input-switch" checked>

SCSS

input[type="checkbox"].input-switch {
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	width: 60px;
	height: 34px;
	border-radius: 34px;
	background-color: #cccccc;
	margin: 15px;
	cursor: pointer;
	-webkit-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;

	&:before {
		position: absolute;
		content: "";
		top: 0;
		left: 0;
		width: 26px;
		height: 26px;
		margin: 4px;
		background-color: #FFFFFF;
		border-radius: 100%;
		transition: all 0.3s ease-in-out;
	}

	&:checked {
		background-color: #f42956;

		&:before {
			transform: translateX(+100%);
		}
	}

	&:disabled {
		cursor: not-allowed;
	}
}