Select Dropdown

Categories

View All Category 1 Category 2 Category 3

HTML

<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>

SCSS

$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.