<p>Regular size: 
	<input type="checkbox" class="switch">

<p>Bigger: 
	<input type="checkbox" class="switch" style="font-size: 200%">

<p>With larger and smaller thumb: 
	<input type="checkbox" class="switch" style="--thumb-margin: -.2em">
	<input type="checkbox" class="switch" style="--thumb-margin: .2em">
	
<p>Different colors:
	<input type="checkbox" class="switch" style="--thumb-color: black; --switch-color: white; border: 1px solid black; --switch-color-checked: red">

<p>Right to left: 
	<input type="checkbox" class="switch" dir="rtl">
	
<p>
	Disabled:
	<input type="checkbox" class="switch" disabled>
</p>
@use postcss-nested;

input[type=checkbox].switch {
	--_switch-width: var(--switch-width, 3em);
	--_switch-height: var(--switch-height, calc(var(--_switch-width) / 2));
	--_switch-color: var(--switch-color, hsl(220 10% 60%));
	--_switch-color-checked: var(--switch-color-checked, hsl(205 50% 50%));
	--_thumb-margin: var(--thumb-margin, .1em);
	--_thumb-color: var(--thumb-color, hsl(220 10% 96%));

	-webkit-appearance: none;
	display: inline-flex;
	vertical-align: var(--_thumb-margin);
	align-items: center;
	width: var(--_switch-width);
	height: var(--_switch-height);
	box-sizing: border-box;
	border: 1px solid rgb(0 0 0 / .1);
	border-radius: 1em;
	--current-background: var(--_switch-color);
	background: var(--current-background);
	cursor: pointer;
	transition: .3s background;
	
	&::before {
		content: "";
		display: block;
		aspect-ratio: 1 / 1;
		margin: var(--_thumb-margin);
		height: calc(100% - 2 * var(--_thumb-margin));
		background: var(--_thumb-color);
		border-radius: 50%;
		transition: margin;
		transition-duration: inherit;
		box-shadow: 0 0 0 1px var(--current-background), 0 0 var(--focus-ring, );
	}
	
	&:checked {
		--current-background: var(--_switch-color-checked);
		
		&::before {
			margin-inline-start: calc(var(--_switch-width) - var(--_switch-height) + var(--_thumb-margin));
		}
	}
	
	&:disabled {
		filter: grayscale();
		opacity: .6;
		cursor: not-allowed;
	}
	
	&:focus {
		outline: none;
		
		&::before {
			--focus-ring: .05em .2em hsl(205 80% 50% / .5);
		}
	}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.