<body>
		<div class="container">
			<header>
				<h1>Pure CSS <strong>Dropdown</strong></h1>
			</header>
			<section>
				<article>
					<h2>just css and html</h2>
					<form class="dropdown" tabindex='0'>
						<ul class="dropdown_list">
							<li>
								<input type="radio" name="dropdown_val" id="val-null" value="null" checked="checked">
								<label for="val-null">Select an option</label>
							</li>
							<li>
								<input type="radio" name="dropdown_val" id="val-0" value="0">
								<label for="val-0">Option 0</label>
							</li>
							<li>
								<input type="radio" name="dropdown_val" id="val-1" value="1">
								<label for="val-1">Option 1</label>
							</li>
							<li>
								<input type="radio" name="dropdown_val" id="val-2" value="2">
								<label for="val-2">Option 2</label>
							</li>
							<li>
								<input type="radio" name="dropdown_val" id="val-3" value="3">
								<label for="val-3">Option 3</label>
							</li>
							<li>
								<input type="radio" name="dropdown_val" id="val-4" value="4">
								<label for="val-4">Option 4</label>
							</li>
						</ul>
						<span class="dropdown_switch" tabindex='1'></span>
					</form>
				</article>
			</section>
		</div>
	</body>
@import "compass/css3";

@import "compass/reset";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);

$maxScreen: 480px;

body, html { height: 100%; }

body {
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 16px;
    background: #d0d0d0;
    color: #444444;
}

h1 {
	font-size: 2.5em;
	margin-bottom: 0.5em;
}

h2 {
	margin-bottom: 3em;
}

p {
	width: 23em;
	font-size: 1.2em;
	line-height: 1.5em;
	margin-bottom: 1em;
	&:last-of-type {
		margin-bottom: 2em;
	}
}

strong {
    font-weight: 700;
}

.container {

	height: 100%;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

	-webkit-align-items: center;
	-moz-align-items: center;
	align-items: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;

	-webkit-box-orient: vertical;
	-moz-box-orient: vertical;
	-webkit-box-direction: normal;
	-moz-box-direction: normal;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
  	-moz-box-pack: center;
}


.dropdown {

	height: 3em;
	width: 1.618em * 10;

	text-align: left;
	position: relative;

	background-color: #f5f5f5;

	.dropdown_switch {
		@include transition( all 0.2s ease-in-out );
		@include transform(scale(0.75));
		@include border-radius(50%);
		position: absolute;
		right: 0.75em;
		top: 0.75em;
		z-index: 0;
		width: 1.5em;
		height: 1.5em;
		background-color: #3498db;

		&:focus {
			@include transform(scale(0.75));
		}
	}

	&:focus {

		background-color: transparent;

		.dropdown_list {

			background-color: #f5f5f5;

			input:not(:checked) + label {
				height: auto;
				padding: 1em 1.2em;
			}

			input:checked + label {
				color: #f0f0f0;
				background-color: #444444;
			}

			&+ .dropdown_switch {
				z-index: 2;
				background-color: #e74c3c;
				@include transform(scale(1));
			}

		}
	}

	.dropdown_list {

		z-index: 1;
		position: absolute;
		width: 100%;
		left: 0;
		top: 0;

		input {
			display: none;
		}

		label {
			@include transition( all 0.2s ease-in-out );
			padding: 1em 1.2em;
			position: relative;
			display: block;
		}

		input:not(:checked) + label,
		li:first-child input:not(:checked) + label {
			height: 0;
			padding: 0 1.2em;
			overflow: hidden;
		}

		li:first-child input:not(:checked) + label {
			@include transition-duration(0.6s);
		}

	}
}

body {

	@media screen and (max-width: $maxScreen) {

		.dropdown:focus {

			position: fixed;
			height: 100%;
			width: 100%;
			left: 0;
			top: 0;

			.dropdown_list {

				height: 100%;
				overflow: auto;

				li:first-child label {
					opacity: 0;
				}

				input:not(:checked) + label {
					@include transition(none);
					height: auto;
					padding: 1em 1.2em;
				}

				&:focus {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
				}
			}
		}
	}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.