Radios With Sliding Focus

Open In Editor Publish Your Code

* {
	border: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
:root {
	--hue: 223;
	--bg: hsl(var(--hue),90%,90%);
	--fg: hsl(var(--hue),90%,10%);
	--primary: hsl(var(--hue),90%,50%);
	--trans-dur: 0.3s;
	--trans-timing: cubic-bezier(0.65,0,0.35,1);
	font-size: calc(16px + (24 - 16) * (100vw - 320px) / (2560 - 320));
}
body,
input {
	color: var(--fg);
	font: 1em/1.5 "DM Sans", sans-serif;
}
body {
	background-color: var(--bg);
	display: flex;
	height: 100vh;
	transition:
		background-color var(--trans-dur),
		color var(--trans-dur);
}
main {
	margin: auto;
	padding: 1.5em 0;
	width: 100%;
}
form {
	margin: auto;
	max-width: 20em;
	position: relative;
	width: calc(100% - 3em);
}
label,
input[type="radio"] {
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
label {
	background-color: hsla(0,0%,100%,0);
	border-radius: 0.75em;
	display: flex;
	align-items: center;
	padding: 1.5em;
	transition: background-color var(--trans-dur);
}
input[type="radio"] {
	background-color: hsl(0,0%,100%);
	border-radius: 50%;
	box-shadow:
		0 0 0 0.0625em hsl(var(--hue),90%,80%),
		0 0.125em 0.125em 0.0625em hsla(var(--hue),90%,10%,0.3);
	flex-shrink: 0;
	margin-inline-end: 1em;
	outline: transparent;
	position: relative;
	width: 1.5em;
	height: 1.5em;
	transition:
		background-color var(--trans-dur),
		box-shadow var(--trans-dur);
	-webkit-appearance: none;
	appearance: none;
}
input[type="radio"]:before,
input[type="radio"]:after {
	border-radius: 50%;
	content: "";
	display: block;
	position: absolute;
	transform: scale(0);
	transition: transform var(--trans-dur) var(--trans-timing);
}
input[type="radio"]:before {
	box-shadow:
		0 0 0 0.5em var(--primary) inset,
		0 0 0 0.0625em var(--primary);
	top: -0.0625em;
	left: -0.0625em;
	width: calc(100% + 0.125em);
	height: calc(100% + 0.125em);
}
input[type="radio"]:after {
	background-color: hsl(0,0%,100%);
	top: 25%;
	left: 25%;
	width: 50%;
	height: 50%;
}
input[type="radio"]:checked:before,
input[type="radio"]:checked:after {
	transform: scale(1);
}
label:has(input[type="radio"]:checked),
label:has(input[type="radio"]:not(:checked)):hover {
	background-color: hsla(0,0%,100%,0.5);
}
.selection {
	border-radius: 0.75em;
	box-shadow: 0 0 0 0.125em var(--primary) inset;
	display: none;
	pointer-events: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4.5em;
	transition: transform var(--trans-dur) var(--trans-timing);
}
label:has(input[type="radio"]:checked) ~ .selection {
	animation: fade-in var(--trans-dur) var(--trans-timing);
	display: inherit;
}
label:nth-of-type(2):has(input[type="radio"]:checked) ~ .selection {
	transform: translateY(100%);
}
label:nth-of-type(3):has(input[type="radio"]:checked) ~ .selection {
	transform: translateY(200%);
}
.truncate {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
	:root {
		--bg: hsl(var(--hue),90%,10%);
		--fg: hsl(var(--hue),90%,90%);
	}
	label {
		background-color: hsla(var(--hue),90%,30%,0);
	}
	label:has(input[type="radio"]:checked),
	label:has(input[type="radio"]:not(:checked)):hover {
		background-color: hsla(var(--hue),90%,30%,0.5);
	}
	input[type="radio"] {
		background-color: hsl(var(--hue),90%,30%);
		box-shadow:
			0 0 0 0.0625em hsl(var(--hue),90%,50%),
			0 0.125em 0.125em 0.0625em hsla(var(--hue),90%,10%,0.3);
	}
}

/* Animations */
@keyframes fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

Radios With Sliding Focus

Recommended

HTML Stickman with Grappling Hook Structure

Stylish CSS Button with Animated Text and Icon

Multi Step Form with Progress Bar using jQuery and CSS3

HTML

CSS

JS

Recommended

HTML Stickman with Grappling Hook Structure

Stylish CSS Button with Animated Text and Icon

Multi Step Form with Progress Bar using jQuery and CSS3

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS