CSS only Select

css-only-select.markdown

CSS only Select

Select input using radio inputs

A Pen by 王树贤 on CodePen.

License.

index.html

<form>
	
	<ul class="select">
		<li>
			<input class="select_close" type="radio" name="awesomeness" id="awesomeness-close" value=""/>
			<span class="select_label select_label-placeholder">Awesomeness Level</span>
		</li>
		
		<li class="select_items">
			<input class="select_expand" type="radio" name="awesomeness" id="awesomeness-opener"/>
			<label class="select_closeLabel" for="awesomeness-close"></label>
			
			<ul class="select_options">
				<li class="select_option">
					<input class="select_input" type="radio" name="awesomeness" id="awesomeness-ridiculous"/>
					<label class="select_label" for="awesomeness-ridiculous">ridiculous</label>
				</li>

				<li class="select_option">
					<input class="select_input" type="radio" name="awesomeness" id="awesomeness-reasonable"/>
					<label class="select_label" for="awesomeness-reasonable">reasonable</label>
				</li>

				<li class="select_option">
					<input class="select_input" type="radio" name="awesomeness" id="awesomeness-lacking"/>
					<label class="select_label" for="awesomeness-lacking">lacking</label>
				</li>

				<li class="select_option">
					<input class="select_input" type="radio" name="awesomeness" id="awesomeness-awesomeless"/>
					<label class="select_label" for="awesomeness-awesomeless">awesomeless</label>
				</li>
			</ul>
			
			<label class="select_expandLabel" for="awesomeness-opener"></label>
		</li>
	</ul>
	
</form>

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.postcss

form {
	width: 100%;
	height: 100%;
	padding-bottom: 75px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-image: radial-gradient(at top, #b5e6cf, #9dddad);
}

.select {
	width: 225px;
	height: 40px;
	cursor: pointer;
	background-color: white;
	box-shadow: 0 2px 0 white;
	border-radius: 2px;
	
	&_expand {
		width: 0;
		height: 40px;
		position: absolute;
		top: 0;
		right: 0;
		
		&::after {
			content: '\003E';
			position: absolute;
			top: 50%;
			right: 0;
			transform: translate(-50%, -50%) rotate(90deg) scaleY(1.75);
			color: #3e3e3e;
			font-size: 28px;
			pointer-events: none;
			z-index: 2;
			transition: all 250ms cubic-bezier(.4,.25,.3,1);
			opacity: .6;
		}
		
		&:hover::after {opacity: 1}

		&:checked::after {transform: translate(-50%, -50%) rotate(90deg) scaleX(-1) scaleY(1.75);}
	}
	
	&_expandLabel {
		display: block;
		width: 100%;
		height: 40px;
		position: absolute;
		top: 0;
		left: 0;
		cursor: pointer;
	}
	
	&_close {display: none}
	
	&_closeLabel {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		display: none;
	}
	
	&_items {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		border: 2px solid #2fb5d1;
		border-radius: 2px;
		padding-top: 40px;
	}
	
	&_input {display: none}
	
	&_label {
		transition: all 250ms cubic-bezier(.4,.25,.3,1);
		display: block;
		height: 0;
		font-size: 1.2rem;
		line-height: 40px;
		overflow: hidden;
		color: #3e3e3e;
		background-color: #fff;
		cursor: pointer;
		padding-left: 20px;
		
		&-placeholder {
			height: 40px;
			vertical-align: middle;
			position: absolute;
			top: 0;
			left: 0;
			opacity: .6;
			background-color: transparent;
		}
	}
	
	&_expand:checked {
		+ .select_closeLabel {
			display: block;
			
			+ .select_options {
				.select_label {
					height: 40px;
					&:hover {background-color: #f7f7f7}
				}
				
				+ .select_expandLabel {display: none}
			}
		}
	}
	
	&_input:checked + .select_label {
		height: 40px;
		margin-top: -40px;
	}
}

styles

<link href="https://codepen.io/udyux/pen/jWMbjG" rel="stylesheet" />