How to style a select dropdown

Short answer

The <select> box itself is styled like a regular field — with a border, padding and font:

<style>
  select { padding: 8px 12px; border: 1px solid silver; border-radius: 8px; font: inherit; background-color: white; }
</style>
 
<select>
  <option>Small — $3</option>
  <option>Medium — $4</option>
  <option>Large — $5</option>
</select>

A custom arrow

appearance: none removes the default arrow, and your own is drawn as a background — with gradients or SVG. Leave padding on the right so the text does not run into the arrow:

<style>
  .select { appearance: none; padding: 8px 36px 8px 12px; border: 1px solid silver; border-radius: 8px; font: inherit;
    background-color: white; background-repeat: no-repeat; background-size: 6px 6px;
    background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%);
    background-position: right 18px center, right 12px center; }
</style>
 
<select class="select">
  <option>Tea</option>
  <option>Coffee</option>
</select>

The open list

The items of the open list are drawn by the system, and CSS has little effect on them: usually only the text and background color of <option> can be changed. New browsers support a fully customizable list via appearance: base-select, but not all yet, so the standard list is the reliable option.

Common mistake

Instead of <select>, a "pretty" list is built from <div> elements and JavaScript. It does not work from the keyboard, does not open the convenient system picker on a phone and is not submitted with the form. Style a real <select>, and build a complex list with search only when there is no way around it.