Как оформить выпадающий список select

Короткий ответ

Сам блок <select> оформляется как обычное поле — рамкой, отступами и шрифтом:

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

Своя стрелка

Стандартную стрелку убирает appearance: none, а свою рисуют фоном — градиентами или SVG. Справа оставьте отступ, чтобы текст не налез на стрелку:

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

Раскрытый список

Пункты открытого списка рисует система, и CSS влияет на них слабо: обычно получается поменять только цвет текста и фона у <option>. Новые браузеры поддерживают полностью настраиваемый список через appearance: base-select, но пока не все, поэтому стандартный список — надёжный вариант.

Частая ошибка

Вместо <select> собирают «красивый» список из <div> и JavaScript. Он не работает с клавиатуры, не открывает удобный системный выбор на телефоне и не отправляется с формой. Оформляйте настоящий <select>, а сложный список с поиском делайте только когда без него нельзя.