Как стилизовать select option CSS

Для стилизации элементов select и option в CSS необходимо использовать следующие свойства:

• appearance: позволяет скрыть стандартный вид элемента select;
• background-color: устанавливает цвет фона элемента;
• border: задает границу элемента;
• color: устанавливает цвет текста;
• font-family: задает семейство шрифтов;
• font-size: устанавливает размер шрифта;
• padding: задает отступы внутри элемента.

Пример стилизации элемента select:

select {
  appearance: none;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  color: #333;
  font-family: Arial, sans-serif;
  font-size: 14px;
  padding: 5px;
  width: 200px;
}

select:focus {
  outline: none; /* убираем рамку при фокусе */
  box-shadow: 0 0 5px #ddd; /* добавляем тень при фокусе */
}

/* стилизация элементов option */
select option {
  background-color: #fff;
  color: #333;
  font-family: Arial, sans-serif;
  font-size: 14px;
  padding: 5px;
}

Этот пример задает стандартный вид элементу select с белым фоном и серой границей. Фокус при наведении на элемент будет подсвечиваться тенью, а элементы option будут иметь белый фон и серый текст.