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>
$select-btn-size: 48px;
.select select {
// A reset of styles, including removing the default dropdown arrow
color: var(--black);
appearance: none;
background-color: transparent;
border: 1px solid var(--black);
padding: var(--s-3) var(--s4);
padding-right: calc(#{$select-btn-size} + var(--s4));
margin: 0;
width: 100%;
font-family: inherit;
font-size: inherit;
text-transform: uppercase;
font-weight: 700;
cursor: inherit;
line-height: inherit;
position: relative;
// Stack above custom arrow
z-index: 2;
transition: all 200ms ease-in-out;
}
.select {
position: relative;
background-color: var(--white);
cursor: pointer;
line-height: 1.1;
// Custom arrow
&::after {
content: "";
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNoZXZyb24tZG93biI+PHBhdGggZD0ibTYgOSA2IDYgNi02Ii8+PC9zdmc+);
top: 0;
right: 0;
z-index: 1;
display: block;
position: absolute;
width: #{$select-btn-size};
height: 100%;
background-repeat: no-repeat;
background-position: center center;
}
}
select:focus {
outline: none;
box-shadow: 0px 0px 3px 3px blue;
}
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.