Dropdown using <details> and <input type="radio">

dropdown-using-details-and-input-type-radio.markdown

Dropdown using

and

Recreation of this Dribbble shot https://dribbble.com/shots/15124959-Light-UI-Elements by Jan Hoffmann.

A Pen by Matt Daniel Brown on CodePen.

License.

index.html

<fieldset>
	<legend>Dropdown</legend>
	<details open>
		<summary>Choose language...<span class="material-icons-round">arrow_drop_down</span></summary>
		<div>
			<label>
				<input type="radio" name="radio"/>
				<span>HTML</span>
			</label>
			<label>
				<input type="radio" name="radio" checked/>
				<span>CSS/Sass</span>
			</label>
			<label>
				<input type="radio" name="radio"/>
				<span>JavaScript</span>
			</label>
			<label>
				<input type="radio" name="radio"/>
				<span>.NET</span>
			</label>
			<label>
				<input type="radio" name="radio"/>
				<span>C#</span>
			</label>
			<label>
				<input type="radio" name="radio"/>
				<span>PHP</span>
			</label>
		</div>
	</details>
</fieldset>

script.js

// Nope

style.scss

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap");

*,
*:after,
*:before {
	box-sizing: border-box;
}

body {
	font-family: "Inter", sans-serif;
	line-height: 1.5;
	min-height: 100vh;
	font-size: 1.125rem;
	background-color: #f5f7fb;
	color: #4f5d7e;
	font-weight: 500;
}

fieldset {
	margin-left: auto;
	margin-right: auto;
	margin-top: 5rem;
	margin-bottom: 5rem;
	max-width: 400px;
	width: 90%;
}

legend {
	margin-bottom: 0.25rem;
}

details {
	position: relative;

	summary {
		background-color: #fff;
		border: 2px solid #b5bfd9;
		padding: 0.75rem 0.75rem;
		position: relative;
		border-radius: 8px;
		padding-right: 3rem;
		cursor: pointer;
		list-style: none; // Remove arrow
		&::-webkit-details-marker {
			display: none; // Remove arrow
		}

		&:focus {
			outline: 0;
			box-shadow: 0 0 0 4px #b5c9fc;
		}

		&:hover,
		&:focus {
			border-color: #2260ff;
		}

		span {
			position: absolute;
			top: 50%;
			right: 0.75rem;
			transform: translateY(-50%);
			transform-origin: center center;
		}
	}

	&[open]summary {
		border-color: #2260ff;
		box-shadow: 0 0 0 4px #b5c9fc;
		span {
			transform: scaleY(-1) translateY(50%);
		}
	}

	div {
		margin-top: 8px;
		background-color: #fff;
		border: 2px solid #b5bfd9;
		border-radius: 8px;
		display: flex;
		flex-direction: column;
		padding: 0.5rem;
		box-shadow: 0 3px 7px 0 #c8cfe1;

		label {
			position: relative;
			cursor: pointer;
		}

		input {
			-webkit-appearance: none;
			appearance: none;
			visibility: hidden;
			position: absolute;
		}

		input:checked + span {
			background-color: #e9efff;
			color: #2260ff;
		}

		span:hover {
			background-color: #e9efff;
		}

		span {
			display: block;
			padding: 0.625rem;
			border-radius: 8px;
			margin-top: 0.25rem;
		}
	}
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/sanitize.css/2.0.0/sanitize.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/1.1.0/modern-normalize.min.css" rel="stylesheet" />