iiic/checkbox-to-toggle.html

## checkbox-to-toggle.html
<!DOCTYPE html>
<html>

<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>checkbox to toggle element</title>
	<style>
		html {
			box-sizing: border-box;
		}

		*,
		*::before,
		*::after {
			box-sizing: inherit;
		}

		:root {
			--switch-size: 50px;
			--switch-border: calc(var(--switch-size) / 20);
			--active-color: #1c74e9;
			--inactive-color: #fff;
			--active-background: #8db9f4;
			--inactive-background: #ccc;
			--active-shadow: rgba(0, 0, 255, 0.2);
			--inactive-shadow: rgba(99, 99, 99, 0.4);
			--transition-duration: 0.3s;
		}

		.switch {
			position: relative;
			cursor: pointer;
			display: inline-block;
			min-width: var(--switch-size);
			height: calc(var(--switch-size) / 3);
			margin: calc(var(--switch-size) / 6);
		}

		.switch input {
			opacity: 0;
			width: 0;
			height: 0;
			font-size: 0;
		}

		.switch span {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: var(--inactive-background);
			transition: var(--transition-duration);
			user-select: none;
			box-shadow: 0 1px 1px 0 var(--inactive-shadow);
			border-radius: calc(var(--switch-size) / 2 - 2 * var(--switch-border));
		}

		.switch span:before {
			content: '';
			position: absolute;
			height: calc(var(--switch-size) / 2 - var(--switch-border));
			width: calc(var(--switch-size) / 2 - var(--switch-border));
			left: calc(var(--switch-border) * -1);
			bottom: calc(var(--switch-border) * -1);
			background-color: var(--inactive-color);
			box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.6);
			transition: transform var(--transition-duration), background-color var(--transition-duration);
		}

		.switch strong {
			position: absolute;
			margin-left: var(--switch-size);
		}

		.switch input:focus+span:before {
			box-shadow: 0 0 0 calc(var(--switch-size) / 8) var(--inactive-shadow);
		}

		.switch input:checked:focus+span:before {
			box-shadow: 0 0 0 calc(var(--switch-size) / 8) var(--active-shadow);
		}

		.switch input:checked+span::before {
			background-color: var(--active-color);
		}

		.switch input:checked+span {
			background-color: var(--active-background);
		}

		.switch :checked+span:before {
			transform: translateX(calc(var(--switch-size) / 2 + 2 * var(--switch-border)));
		}

		.switch span:before {
			border-radius: 50%;
		}

	</style>
</head>

<body>

	<label class="switch">
		<input type="checkbox" checked>
		<span></span>
		<strong>text</strong>
	</label>

</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>checkbox to toggle element</title>
	<style>
	html {
	box-sizing: border-box;
	}

	*,
	*::before,
	*::after {
	box-sizing: inherit;
	}

	:root {
	--switch-size: 50px;
	--switch-border: calc(var(--switch-size) / 20);
	--active-color: #1c74e9;
	--inactive-color: #fff;
	--active-background: #8db9f4;
	--inactive-background: #ccc;
	--active-shadow: rgba(0, 0, 255, 0.2);
	--inactive-shadow: rgba(99, 99, 99, 0.4);
	--transition-duration: 0.3s;
	}

	.switch {
	position: relative;
	cursor: pointer;
	display: inline-block;
	min-width: var(--switch-size);
	height: calc(var(--switch-size) / 3);
	margin: calc(var(--switch-size) / 6);
	}

	.switch input {
	opacity: 0;
	width: 0;
	height: 0;
	font-size: 0;
	}

	.switch span {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--inactive-background);
	transition: var(--transition-duration);
	user-select: none;
	box-shadow: 0 1px 1px 0 var(--inactive-shadow);
	border-radius: calc(var(--switch-size) / 2 - 2 * var(--switch-border));
	}

	.switch span:before {
	content: '';
	position: absolute;
	height: calc(var(--switch-size) / 2 - var(--switch-border));
	width: calc(var(--switch-size) / 2 - var(--switch-border));
	left: calc(var(--switch-border) * -1);
	bottom: calc(var(--switch-border) * -1);
	background-color: var(--inactive-color);
	box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.6);
	transition: transform var(--transition-duration), background-color var(--transition-duration);
	}

	.switch strong {
	position: absolute;
	margin-left: var(--switch-size);
	}

	.switch input:focus+span:before {
	box-shadow: 0 0 0 calc(var(--switch-size) / 8) var(--inactive-shadow);
	}

	.switch input:checked:focus+span:before {
	box-shadow: 0 0 0 calc(var(--switch-size) / 8) var(--active-shadow);
	}

	.switch input:checked+span::before {
	background-color: var(--active-color);
	}

	.switch input:checked+span {
	background-color: var(--active-background);
	}

	.switch :checked+span:before {
	transform: translateX(calc(var(--switch-size) / 2 + 2 * var(--switch-border)));
	}

	.switch span:before {
	border-radius: 50%;
	}

	</style>
	</head>

	<body>

	<label class="switch">
	<input type="checkbox" checked>
	<span></span>
	<strong>text</strong>
	</label>

	</body>

	</html>