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

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

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

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

Список тем

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

id: 37471_select-style-1

Стандартный элемент `<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

id: 37471_select-style-2

После того как стандартная стрелка убрана, элемент `<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

id: 37471_select-style-3

Теперь, когда мы управляем внешним видом стрелки, давайте придадим самому элементу `<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 с использованием обертки

id: 37471_select-style-4

Часто для более гибкой стилизации, особенно для позиционирования кастомной стрелки, используют дополнительный элемент-обертку вокруг `<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

id: 37471_select-style-5

Используя обертку с относительным позиционированием из предыдущего задания, создайте кастомную стрелку для `<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

id: 37471_select-style-6

Улучшим интерактивность нашего кастомного 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

id: 37471_select-style-7

Важно визуально обозначать элемент, который находится в фокусе (например, после клика или при переходе по 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)

id: 37471_select-style-8

Иногда требуется показать пользователю, что выпадающий список недоступен для взаимодействия. Для этого используется атрибут `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 (ограниченная)

id: 37471_select-style-9

Стилизация самих элементов `<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>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру