Componentes de interruptores CSS

<!--
stylify-variables
	color: '#3EA01D',
/stylify-variables
-->
<label class="display:inline-flex align-items:center flex-wrap:nowrap">
	<span class="margin-right:4px">Outlined</span>
	<input type="checkbox" checked class="
		overflow:hidden
		border:1px_solid_#aaa
		background:#aaa
		appearance:none
		height:24px
		width:48px
		border-radius:24px
		box-shadow:-24px_0_0_2px_#fff_inset,_0px_0_0px_2px_#fff_inset,0_0
		transition:.2s_ease-in-out,.2s_ease-in-out
		will-change:box-shadow,border-color
		[&:checked]{box-shadow:24px_0_0_2px_#fff_inset,_0px_0_0px_2px_#fff_inset,0_0;border-color:$color;background:$color}
	">
</label>
<br>
<label class="display:inline-flex align-items:center flex-wrap:nowrap">
	<span class="margin-right:4px">Solid</span>
	<input type="checkbox" checked class="
		overflow:hidden
		border:1px_solid_#aaa
		background:#aaa
		appearance:none
		height:24px
		width:48px
		border-radius:24px
		box-shadow:-24px_0_0_2px_#fff_inset,_0px_0_0px_2px_#fff_inset,0_0
		transition:.2s_ease-in-out,.2s_ease-in-out
		will-change:box-shadow,border-color
		[&:checked]{box-shadow:24px_0_0_2px_$color_inset,_0px_0_0px_2px_$color_inset,0_0;border-color:$color;background:#fff}
	">
</label>

<!--
stylify-variables
	color: '#6750A4'
/stylify-variables

stylify-components
	switch: `
		display:inline-flex align-items:center flex-wrap:nowrap
		&__input {
			overflow:hidden
			border:1px_solid_#aaa
			background:#aaa
			appearance:none
			height:24px
			width:48px
			border-radius:24px
			box-shadow:-24px_0_0_2px_#fff_inset,_0px_0_0px_2px_#fff_inset,0_0
			transition:.2s_ease-in-out,.2s_ease-in-out
			will-change:box-shadow,border-color

			&--outline:checked {
				box-shadow:24px_0_0_2px_#fff_inset,_0px_0_0px_2px_#fff_inset,0_0
				border-color:$color
				background:$color
			}

			&--solid:checked {
				box-shadow:24px_0_0_2px_$color_inset,_0px_0_0px_2px_$color_inset,0_0
				border-color:$color
				background:#fff
			}
		}
		&__label { margin-right:4px }
	`
/stylify-components
-->

<label class="switch">
	<span class="switch__label">Outlined</span>
	<input type="checkbox" class="switch__input switch__input--outline">
</label>
<br>
<label class="switch">
	<span class="switch__label">Solid</span>
	<input type="checkbox" class="switch__input switch__input--solid">
</label>

<div>

<!--
stylify-variables
	color: '#09b8d1'
/stylify-variables
-->

<div>
	<input type="checkbox" id="remember" checked class="
		display:none
		[&:checked+label::before]{border-color:$color;background:$color}
		[&:checked+label::after]{opacity:1}
	">
	<label for="remember" class="
		display:flex align-items:center cursor:pointer min-height:22px position:relative padding-left:28px
		[&::before,&::after]{display:flex;content:^^;position:absolute;left:0;top:0;transition:.3s}
		[&::after]{content:^\2713^;font-size:20px;line-height:1;opacity:0;color:#fff;align-items:center;justify-content:center;width:22px;height:22px}
		[&::before]{border:1px_solid_#000;border-radius:2px;width:20px;height:20px}
	">
		Remember me
	</label>
</div>


</div>

<div>

<!--
stylify-variables
	color: '#3EA01D',
/stylify-variables
-->
<label class="display:inline-flex align-items:center flex-wrap:nowrap">
	<span class="margin-right:4px">Outlined</span>
	<input type="checkbox" checked class="
		overflow:hidden
		border:1px_solid_#aaa
		background:#aaa
		appearance:none
		height:24px
		width:48px
		border-radius:24px
		box-shadow:-24px_0_0_2px_#fff_inset,_0px_0_0px_2px_#fff_inset,0_0
		transition:.2s_ease-in-out,.2s_ease-in-out
		will-change:box-shadow,border-color
		[&:checked]{box-shadow:24px_0_0_2px_#fff_inset,_0px_0_0px_2px_#fff_inset,0_0;border-color:$color;background:$color}
	">
</label>
<br>
<label class="display:inline-flex align-items:center flex-wrap:nowrap">
	<span class="margin-right:4px">Solid</span>
	<input type="checkbox" checked class="
		overflow:hidden
		border:1px_solid_#aaa
		background:#aaa
		appearance:none
		height:24px
		width:48px
		border-radius:24px
		box-shadow:-24px_0_0_2px_#fff_inset,_0px_0_0px_2px_#fff_inset,0_0
		transition:.2s_ease-in-out,.2s_ease-in-out
		will-change:box-shadow,border-color
		[&:checked]{box-shadow:24px_0_0_2px_$color_inset,_0px_0_0px_2px_$color_inset,0_0;border-color:$color;background:#fff}
	">
</label>