Как стилизовать 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 будут иметь белый фон и серый текст.

реклама

Качественный хостинг сайтов

реклама

Получите консультацию нашего маркетолога

Изучит ваш проект, подберет подходящие услуги и тарифы

Получите бесплатный аудит

Наш специалист сделает базовый аудит вашего проекта и предложит персональные предложения.

Закажите услугу Как стилизовать select option CSS

Наш специалист свяжется с вами в ближайшее время и уточнит детали