Styled Select Dropdown

Custom <select> appearance using appearance:none and an inline SVG background arrow.

Published May 24, 2026

Demo

Default styled select

Accent border variant

HTML
				
				<select class="custom-select">
  <option>Choose an option</option>
  <option>Apple</option>
  <option>Banana</option>
</select>

			

CSS
				
				select {
  appearance: none;
  -webkit-appearance: none;
  padding: .7rem 2.75rem .7rem 1rem;
  background-image: url("data:image/svg+xml,..."); /* SVG arrow */
  background-repeat: no-repeat;
  background-position: right 1rem center;
  border: 2px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
}

			

How it works

The native <select> dropdown is notoriously hard to style. appearance: none (with its -webkit- prefix) removes the browser's default arrow and appearance. A custom arrow is injected as an inline SVG via background-image, positioned with background-position to the right. The background-repeat: no-repeat prevents it from tiling, and extra right padding ensures text doesn't overlap the arrow.