PROWAREtech

articles » current » css » toggle-button-checkboxes

CSS: Toggle Buttons

Use checkbox and radio controls to create toggle buttons just like on the Apple iPhone.

Create animated iPhone/smartphone toggle button checkboxes or radio buttons. To create custom checkboxes/radio buttons, follow this link.

Note: this code is not compatible with Internet Explorer 11, but the following code is.

<!DOCTYPE html>

<html lang="en">
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>iPhone Radio/Checkboxes</title>
	<style>
	body {
		background-color: white;
		color: black;
	}
	input[type="checkbox"],
	input[type="radio"] {
		position: relative;
		width: 52px;
		height: 30px;
		border-radius: 14px;
		outline: none;
		border: none;
		-webkit-appearance: none;
		background-color: lightgray;
		transition: .1s;
	}
		input[type="checkbox"]::before,
		input[type="radio"]::before {
			content: "";
			position: absolute;
			width: 28px;
			height: 28px;
			border-radius: 14px;
			top: 1px;
			left: 1px;
			background-color: white;
			transition: .1s;
		}

		input[type="checkbox"]:checked,
		input[type="radio"]:checked {
			background-color: limegreen;
		}

			input[type="checkbox"]:checked::before,
			input[type="radio"]:checked::before {
				left: 23px;
			}
	@media (prefers-color-scheme: dark) {
		body {
			background-color: black;
			color: white;
		}
		input[type="checkbox"],
		input[type="radio"] {
			background-color: dimgray;
		}
	}
	</style>
</head>
<body>
	<input type="checkbox" />
	<br/>
	<input type="checkbox" />
</body>
</html>

Another Version

The above example, however, is the cleanest solution. The below example is compatible with Internet Explorer 11.

<!DOCTYPE html>

<html lang="en">
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Toggle Button Checkboxes</title>
	<style>
	body {
		background-color: #e8e8e8;
		color: #333;
	}
	main {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
	.togglebtn {
		position: absolute;
		margin: 0;
		width: 52px;
		height: 30px;
		opacity: 0;
	}
		.togglebtn + label {
			position: relative;
			box-sizing: border-box;
			display: inline-block;
			border: 1px solid #ccc;
			height: 28px;
			width: 52px;
			background-color: #e8e8e8;
			border-radius: 14px;
		}
		.togglebtn + label > b {
			position: absolute;
			display: inline-block;
			height: 100%;
			vertical-align: top;
			transition: margin-left .1s;
			background-color: #fbfbfb;
			width: 28px;
			border-radius: 50%;
			box-shadow: 0 3px 3px rgba(0,0,0,0.25);
			margin-left: 0;
			left: 0;
		}
	.togglebtn:checked + label {
		background-color: limegreen;
	}
	.togglebtn:checked + label > b {
		margin-left: 22px;
	}
	@media (prefers-color-scheme: dark) {
		body {
			background-color: #333;
			color: #f8f8f8;
		}
		.togglebtn + label {
			border-color: #555;
			background-color: #555;
		}
	}
	</style>
</head>
<body>
	<main>
		<form action="#" method="post">
		<div>
			<input type="checkbox" name="check1" id="check1" class="togglebtn" />
			<label for="check1">
				<b></b>
			</label>
		</div>
		<div>
			<input type="checkbox" name="check2" id="check2" class="togglebtn" /><label for="check2"><b></b></label>
		</div>
		<div>
			<input type="checkbox" name="check3" id="check3" class="togglebtn" /><label for="check3"><b></b></label>
		</div>
		</form>
	</main>
</body>
</html>

Coding Video

https://youtu.be/zOrF_hqHQf4

Another Version

Make all the checkboxes or radio buttons toggle buttons by specifying the HTML element instead of a CSS class as was done above.

<!DOCTYPE html>

<html lang="en">
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Custom Checkboxes</title>
	<style>
	body {
		font-family: sans-serif;
		background-color: #eee;
		color: #333;
		padding: 25px;
	}
	input[type="checkbox"] {
		position: absolute;
		margin: 0;
		width: 52px;
		height: 30px;
		opacity: 0;
	}
		input[type="checkbox"] + label {
			box-sizing: border-box;
			display: inline-block;
			border: 1px solid transparent;
			height: 28px;
			width: 52px;
			background-color: #b8b8b8;
			border-radius: 14px;
		}
		input[type="checkbox"] + label > * {
			display: inline-block;
			height: 100%;
			vertical-align: top;
			transition: width .1s;
		}
		input[type="checkbox"] + label .toggle {
			background-color: #fbfbfb;
			width: 28px;
			border-radius: 50%;
			/*transform: scale(1.25);*/
			/*box-shadow: 0 2px 5px rgba(0,0,0,0.25);*/
		}
		input[type="checkbox"]:checked + label {
			background-color: limegreen;
		}
		input[type="checkbox"] + label .unchecked {
			width: 22px;
		}
		input[type="checkbox"] + label .checked {
			width: 0;
		}
		input[type="checkbox"]:checked + label .unchecked {
			width: 0;
		}
		input[type="checkbox"]:checked + label .checked {
			width: 22px;
		}
	</style>
</head>
<body>
	<main>
		<form action="#" method="post">
			<input type="checkbox" name="check1" id="check1" />
			<label for="check1">
				<span class="checked"></span><span class="toggle"></span><span class="unchecked"></span>
			</label>
			<input type="checkbox" name="check2" id="check2" />
			<label for="check2">
				<span class="checked"></span><span class="toggle"></span><span class="unchecked"></span>
			</label>
		</form>
	</main>
</body>
</html>

Coding Video

https://youtu.be/mSpMz3EXCS4


This site uses cookies. Cookies are simple text files stored on the user's computer. They are used for adding features and security to this site. Read the privacy policy.
CLOSE