Create beautiful Toggle Switch With CSS Only


Category: CSS & CSS3 | July 2, 2021
Author:Jason Miller
Official Page:Go to website
Last Update:July 2, 2021
License:MIT

css toggle switch

Description:

Are you looking to create toggle switch with CSS only? Then, you are at the right place.

In this example, we will be creating a beautiful toggle switch by using HTML check-boxes and CSS style only.

How can i use it?

Step 1: First, create the list of check-boxes using HTML and then, assign the ‘switch’ as a role attribute. Here is example.

<fieldset>
	<legend>Thrusters:</legend>
	<center>
		<label>
			<input type="checkbox" role="switch">
			Bow
		</label>
	</center>
	<label>
		<input type="checkbox" role="switch" style="--bg-checked: rgb(240,70,110);">
		Port
	</label>
	<label>
		<input type="checkbox" role="switch" checked  style="--bg-checked: rgb(50,240,130);">
		Starboard
	</label>
	<center>
		<label>
			<input type="checkbox" role="switch">
			Stern
		</label>
	</center>
</fieldset>
<br>
<br>
<fieldset style="display:inline-flex; flex-direction:column;">
	<legend>States:</legend>
	<label>
		<input type="checkbox" role="switch" disabled>
		Disabled
	</label>
	<label>
		<input type="checkbox" role="switch" disabled checked>
		Disabled + Checked
	</label>
	<label>
		<input type="checkbox" role="switch" indeterminate>
		Indeterminate
		<script>document.currentScript.previousElementSibling.indeterminate=true</script>
	</label>
</fieldset>

<!-- Demo Stuff: -->
<fieldset class="demo-toggles">
	<label>
		<input type="checkbox" role="switch" onclick="document.documentElement.classList.toggle('dark',this.checked)">
		Dark
	</label>
	<label>
		<input type="checkbox" role="switch" onclick="document.documentElement.classList.toggle('mobile',this.checked)">
		Mobile
	</label>
</fieldset>

Step 2: Once we have created the HTML structure, we will write the CSS to create toggle switch.

/*
 * <input type=checkbox class=switch>
 * License: MIT
 */
input[role=switch] {
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	display: inline-block;
	width: 2.4em;
	height: 1.4em;
	margin: -.2em 0;
	box-sizing: content-box;
	padding: 0;
	border: none;
	border-radius: .7em;
	background: rgba(160,160,160,0.7);
	box-shadow: 0 .15em .25em rgba(0,0,0,0.5) inset, 0 -.5px 0 rgba(255,255,255,0.2) inset;
	transition: background-color 250ms ease, box-shadow 250ms ease;
	font-size: 100%;
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	user-select: none;
	outline: none;
}
input[role=switch]::before {
	content: '';
	display: flex;
	align-content: center;
	justify-content: center;
	position: absolute;
	width: 1em;
	height: 1em;
	left: 0;
	top: 0;
	background: rgba(240,240,240,0.9);
	box-shadow: 0 1px 1px #fff inset, 0 .2em .5em rgba(255,255,255,0.7) inset, 0 -.2em .3em rgba(0,0,0,0.2) inset, 0 .05em .25em rgba(0,0,0,0.7);
	border-radius: 50%;
	transform: translate(20%, 20%);
	transition: transform 250ms ease;
	color: rgba(0,0,0,0.3);
	line-height: 1;
}
input[role=switch]:focus::before {
	background: rgba(255,255,255,0.9);
}
input[role=switch]:checked {
	background-color: var(--bg-checked, var(--bg, rgb(60,130,250)));
}
input[role=switch]:focus-visible {
	box-shadow: 0 .15em .25em rgba(0,0,0,0.5) inset, 0 -.5px 0 rgba(255,255,255,0.2) inset, 0 0 0 2px rgba(255,255,255,0.8), 0 0 0 4px var(--bg-checked, var(--bg, rgb(60,130,250)));
}
input[role=switch]:checked::before {
	transform: translate(120%, 20%);
}
input[role=switch]:indeterminate::before {
	transform: translate(70%, 20%);
	content: '-';
}
input[role=switch]:disabled:before {
	opacity: 0.4;
}


/** Optional Variant: Color dot in the center of the switch knob: */
/*
input[role=switch]::before {
	background: radial-gradient(var(--bg-checked, var(--bg, rgb(60,130,250))) 10%, rgb(240,240,240) 20%);
}
input[role=switch]:focus::before {
	background: radial-gradient(var(--bg-checked, var(--bg, rgb(60,130,250))) 10%, rgb(255,255,255) 20%);
}
*/

/** Changing the switch size is as easy as setting its font-size (default is 1em) */
.mobile [role=switch] {
	font-size: 1.3rem;
}

/* Demo Styles */
html {
	font: 100%/1.3 system-ui,sans-serif;
	color: #333;
	transition: background 250ms ease, color 250ms ease;
}
html.dark {
	background: #22292f;
	color: #eee;
}
fieldset {
	border: 1px solid rgba(150,150,150,0.5);
	border-radius: 5px;
	padding: 10px;
	display: inline-block;
}
legend {
	opacity: 0.7;
}
label {
	padding: 20px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	user-select: none;
}
center {
	padding: 1em 0;
}

.demo-toggles {
	position: fixed;
	right: 0;
	top: 0;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	background: #eee;
	border-width: 0 0 1px 1px;
	color: #555;
	border-radius: 0 0 0 15px;
	transition: all 250ms ease;
}
.demo-toggles > label {
	padding: 10px;
}
.dark .demo-toggles {
	background: #32393f;
	color: #eee;
}

And, you are done. 🙂