Skip to content

Select Dropdown

<div class="l-center" style="--cr-align: center; margin-top: var(--vertical-rhythm)">
	<div class="l-stack">
		<label for="categories">Categories</label>
		<div class="select">
			<select name="" id="categories">
				<option value="all">View All</option>
				<option value="cat1">Category 1</option>
				<option value="cat2">Category 2</option>
				<option value="cat3">Category 3</option>
			</select>
		</div>
	</div>

</div>

This pattern demonstrates how to customize the appearance of a select dropdown. It requires wrapping the select tag in a wrapper element in order to customize the dropdown arrow.