Стилизация select и option

Тренажер по CSS для пользователей с начальным уровнем подготовки.

Опубликовано 17.03.2025
Просмотры 7
Автор
Рек. время прохождения 6 минут
Упражнений 9
Комментарии 0
Тренажер CSS

Эта серия заданий посвящена стилизации стандартных элементов форм `<select>` и `<option>`. Вы научитесь изменять их внешний вид, убирать стандартное оформление браузера, добавлять собственные иконки и стрелки, а также стилизовать различные состояния элементов. Задания построены от простого к сложному: начиная с базового сброса стилей и заканчивая созданием полностью кастомного выпадающего списка с использованием оберток и псевдоэлементов. Обратите внимание, что стилизация `<option>` имеет кроссбраузерные ограничения.

Список тем

Убираем стандартную стрелку select

Стандартный элемент `<select>` имеет разный вид в разных браузерах и операционных системах. Первым шагом к созданию собственного дизайна является удаление стандартного оформления, предоставляемого браузером. Ваша задача — применить свойство, которое убирает стандартный внешний вид элемента `<select>`.

CSS
/* styles.css */
.custom-select {
  /* Убираем стандартное оформление */
  input1: input2;
  /* Для кроссбраузерности (опционально для современных браузеров) */
  -webkit-appearance: none;
  -moz-appearance: none;

  /* Добавим немного базовых стилей для наглядности */
  padding: 8px 12px;
  border: 1px solid #ccc;
  background-color: #fff;
  min-width: 150px;
  cursor: pointer;
}
HTML
<!-- index.html -->
<select class="custom-select">
  <option value="1">Опция 1</option>
  <option value="2">Опция 2</option>
  <option value="3">Опция 3</option>
</select>
Чтобы убрать стандартное оформление элемента формы, включая стрелку у `<select>`, используйте CSS свойство `appearance` со значением `none`. Возможно, для кроссбраузерности потребуются вендорные префиксы `-webkit-appearance` и `-moz-appearance`, но в современных браузерах часто достаточно основного свойства.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Добавляем свою стрелку через background

После того как стандартная стрелка убрана, элемент `<select>` выглядит неполноценно. Добавим собственную стрелку, используя фоновое изображение. Вам нужно указать URL изображения для фона, настроить его повторение и позиционирование так, чтобы стрелка появилась справа.

CSS
/* styles.css */
.custom-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  padding: 8px 30px 8px 12px; /* Добавили отступ справа для стрелки */
  border: 1px solid #ccc;
  background-color: #fff;
  min-width: 150px;
  cursor: pointer;

  /* Добавляем свою стрелку */
  input1: url('https://naytikurs.ru/img/7.png');
  input2: no-repeat;
  input3: right 10px center;
  background-size: 12px; /* Размер стрелки */
}
HTML
<!-- index.html -->
<select class="custom-select">
  <option value="1">Выберите фрукт</option>
  <option value="2">Яблоко</option>
  <option value="3">Банан</option>
  <option value="4">Апельсин</option>
</select>
Используйте свойство `background-image` для задания URL картинки. Чтобы картинка не повторялась, примените `background-repeat: no-repeat`. Для позиционирования стрелки справа по центру используйте `background-position` со значениями вроде `right center` или `calc(100% - 10px) center`. Также убедитесь, что у `select` есть достаточный `padding-right`, чтобы текст не налезал на стрелку.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Базовая стилизация select

Теперь, когда мы управляем внешним видом стрелки, давайте придадим самому элементу `<select>` более привлекательный вид. Измените фон, добавьте скругление углов и установите базовый размер шрифта.

CSS
/* styles.css */
.custom-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  padding: 10px 35px 10px 15px;
  border: 1px solid #ccc;
  min-width: 180px;
  cursor: pointer;

  /* Стилизация фона */
  input1: #f8f8f8;
  /* Скругление углов */
  input2: 5px;
  /* Размер шрифта */
  input3: 16px;

  /* Оставляем кастомную стрелку из предыдущего задания */
  background-image: url('https://naytikurs.ru/img/7.png');
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
}
HTML
<!-- index.html -->
<select class="custom-select">
  <option value="1">Размер</option>
  <option value="S">S</option>
  <option value="M">M</option>
  <option value="L">L</option>
  <option value="XL">XL</option>
</select>
Используйте свойства `background-color` для цвета фона, `border-radius` для скругления углов и `font-size` для размера шрифта. Не забудьте, что `appearance: none;` уже применено для корректного отображения стилей.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Стилизация select с использованием обертки

Часто для более гибкой стилизации, особенно для позиционирования кастомной стрелки, используют дополнительный элемент-обертку вокруг `<select>`. В этом задании вам нужно стилизовать обертку `.select-wrapper`, задав ей относительное позиционирование, чтобы в дальнейшем можно было абсолютно позиционировать псевдоэлемент внутри нее.

CSS
/* styles.css */
.select-wrapper {
  /* Задаем позиционирование для обертки */
  input1: input2;
  /* Определяем, как обертка будет отображаться */
  input3: inline-block;
  /* Можно добавить внешние отступы при необходимости */
  margin: 5px;
}

.select-wrapper select {
  /* Стили для самого select внутри обертки */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  padding: 10px 35px 10px 15px;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
  border-radius: 4px;
  font-size: 16px;
  min-width: 180px;
  cursor: pointer;
  /* Убираем фон, так как стрелку добавим через псевдоэлемент */
  background-image: none;
}
HTML
<!-- index.html -->
<div class="select-wrapper">
  <select>
    <option value="">Выберите страну</option>
    <option value="RU">Россия</option>
    <option value="BY">Беларусь</option>
    <option value="KZ">Казахстан</option>
  </select>
</div>
Для того чтобы дочерние элементы (или псевдоэлементы), позиционированные абсолютно (`position: absolute`), располагались относительно обертки, родительскому элементу (`.select-wrapper`) нужно задать `position: relative;`. Также можно задать `display: inline-block;` или `display: block;`, чтобы обертка корректно занимала место в потоке документа.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Кастомная стрелка через псевдоэлемент ::after

Используя обертку с относительным позиционированием из предыдущего задания, создайте кастомную стрелку для `<select>` с помощью псевдоэлемента `::after` у обертки. Задайте ему символ стрелки, абсолютное позиционирование и расположите справа.

CSS
/* styles.css */
.select-wrapper {
  position: relative;
  display: inline-block;
  margin: 5px;
}

.select-wrapper select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 10px 35px 10px 15px; /* Место для стрелки */
  border: 1px solid #ccc;
  background-color: #f0f0f0;
  border-radius: 4px;
  font-size: 16px;
  min-width: 180px;
  cursor: pointer;
  background-image: none;
}

/* Стилизация псевдоэлемента для стрелки */
.select-wrapper::input1 {
  /* Символ стрелки */
  input2: '▼';
  font-size: 12px;
  color: #333;

  /* Позиционирование */
  input3: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);

  /* Чтобы стрелка не мешала клику по select */
  pointer-events: none;
}
HTML
<!-- index.html -->
<div class="select-wrapper">
  <select>
    <option value="">Выберите цвет</option>
    <option value="red">Красный</option>
    <option value="green">Зеленый</option>
    <option value="blue">Синий</option>
  </select>
</div>
Создайте селектор для псевдоэлемента `.select-wrapper::after`. Задайте ему `content` со строковым значением, содержащим символ стрелки (например, '▼'). Установите `position: absolute;`. Используйте свойства `top`, `right` и `transform` (например, `transform: translateY(-50%);`) для точного позиционирования по вертикали и горизонтали. Свойство `pointer-events: none;` не позволит стрелке перехватывать клики, предназначенные для select.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Стилизация состояния :hover для select

Улучшим интерактивность нашего кастомного select. Добавьте стили, которые будут применяться при наведении курсора мыши на элемент `<select>`. Например, можно изменить цвет рамки или фона.

CSS
/* styles.css */
.select-wrapper {
  position: relative;
  display: inline-block;
  margin: 5px;
}

.select-wrapper select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 10px 35px 10px 15px;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
  border-radius: 4px;
  font-size: 16px;
  min-width: 180px;
  cursor: pointer;
  background-image: none;
  transition: border-color 0.2s ease, background-color 0.2s ease; /* Плавный переход */
}

.select-wrapper::after {
  content: '▼';
  font-size: 12px;
  color: #333;
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  pointer-events: none;
}

/* Стили при наведении */
.select-wrapper select:input1 {
  input2: #aaa;
  input3: #e9e9e9;
}
HTML
<!-- index.html -->
<div class="select-wrapper">
  <select>
    <option value="">Ваш выбор?</option>
    <option value="1">Да</option>
    <option value="0">Нет</option>
    <option value="maybe">Возможно</option>
  </select>
</div>
Используйте псевдокласс `:hover` в селекторе для элемента `<select>` (или для обертки `.select-wrapper`, если хотите изменить ее стиль при наведении). Внутри правила для `:hover` укажите свойства, которые должны измениться, например, `border-color` или `background-color`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Стилизация состояния :focus для select

Важно визуально обозначать элемент, который находится в фокусе (например, после клика или при переходе по Tab). Добавьте стили для состояния `:focus` элемента `<select>`. Часто для этого используют изменение цвета рамки или добавление тени (`box-shadow`).

CSS
/* styles.css */
.select-wrapper {
  position: relative;
  display: inline-block;
  margin: 5px;
}

.select-wrapper select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 10px 35px 10px 15px;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
  border-radius: 4px;
  font-size: 16px;
  min-width: 180px;
  cursor: pointer;
  background-image: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.select-wrapper::after {
  content: '▼';
  font-size: 12px;
  color: #333;
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  pointer-events: none;
}

.select-wrapper select:hover {
  border-color: #aaa;
  background-color: #e9e9e9;
}

/* Стили при фокусе */
.select-wrapper select:input1 {
  /* Убираем стандартную обводку */
  input2: none;
  /* Задаем свою рамку */
  border-color: #007bff;
  /* Добавляем тень для эффекта свечения */
  input3: 0 0 0 3px rgba(0, 123, 255, 0.25);
}
HTML
<!-- index.html -->
<div class="select-wrapper">
  <select>
    <option value="">Город</option>
    <option value="msk">Москва</option>
    <option value="spb">Санкт-Петербург</option>
    <option value="ekb">Екатеринбург</option>
  </select>
</div>
<button>Другой элемент</button> <!-- Для проверки перехода фокуса -->
Используйте псевдокласс `:focus` для элемента `<select>`. Внутри правила задайте нужные стили. Например, можно изменить `border-color` на более заметный цвет или добавить `box-shadow` для создания эффекта свечения вокруг элемента. Не забудьте про `outline: none;`, если хотите убрать стандартную обводку браузера при фокусе и заменить ее своей.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Стилизация неактивного select (:disabled)

Иногда требуется показать пользователю, что выпадающий список недоступен для взаимодействия. Для этого используется атрибут `disabled` в HTML. Ваша задача — стилизовать `<select>`, когда он находится в неактивном состоянии.

CSS
/* styles.css */
.select-wrapper {
  position: relative;
  display: inline-block;
  margin: 5px;
}

.select-wrapper select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 10px 35px 10px 15px;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
  border-radius: 4px;
  font-size: 16px;
  min-width: 180px;
  cursor: pointer;
  background-image: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.select-wrapper::after {
  content: '▼';
  font-size: 12px;
  color: #333;
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  pointer-events: none;
  transition: color 0.2s ease;
}

/* Стили для неактивного состояния */
.select-wrapper select:input1 {
  background-color: #e9ecef;
  border-color: #ced4da;
  color: #6c757d;
  /* Изменяем курсор */
  input2: not-allowed;
}

/* Можно также изменить цвет стрелки для неактивного состояния */
.select-wrapper select:disabled + input3 {
  color: #adb5bd;
}
HTML
<!-- index.html -->
<div class="select-wrapper">
  <label for="active-select">Активный:</label>
  <select id="active-select">
    <option value="1">Вариант A</option>
    <option value="2">Вариант B</option>
  </select>
</div>

<div class="select-wrapper">
  <label for="disabled-select">Неактивный:</label>
  <select id="disabled-select" disabled>
    <option value="1">Вариант A</option>
    <option value="2">Вариант B</option>
  </select>
</div>
Используйте псевдокласс `:disabled` для элемента `<select>`. Внутри правила задайте стили, которые визуально покажут неактивность: обычно это изменение цвета фона на более блеклый (например, серый), изменение цвета текста и рамки, а также изменение курсора на `not-allowed`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Стилизация option (ограниченная)

Стилизация самих элементов `<option>` внутри выпадающего списка сильно ограничена и может не работать одинаково во всех браузерах. Однако базовые вещи, такие как цвет текста и фон, иногда можно изменить. Попробуйте задать цвет фона и цвет текста для элементов `<option>`.

CSS
/* styles.css */
.custom-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  padding: 10px 35px 10px 15px;
  border: 1px solid #ccc;
  background-color: #fff;
  border-radius: 4px;
  font-size: 16px;
  min-width: 200px;
  cursor: pointer;

  background-image: url('https://naytikurs.ru/img/7.png');
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
}

/* Стилизация опций */
input1 {
  /* Цвет фона опций */
  input2: #f0e6ff;
  /* Цвет текста опций */
  input3: #333;
  padding: 5px 10px; /* Может не работать во всех браузерах */
}
HTML
<!-- index.html -->
<select class="custom-select">
  <option value="">Выберите планету</option>
  <option value="mercury">Меркурий</option>
  <option value="venus">Венера</option>
  <option value="earth">Земля</option>
  <option value="mars">Марс</option>
</select>
Используйте селектор `option` для применения стилей ко всем опциям. Задайте свойства `background-color` и `color`. Имейте в виду, что результат может отличаться в разных браузерах, и некоторые стили (например, `padding`, `border`) могут не применяться к `<option>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру