Стилизация range input

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

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

В этом блоке заданий вы потренируетесь в стилизации стандартного элемента управления HTML - ползунка (`<input type=\"range\">`). Вы научитесь изменять внешний вид дорожки (track) и бегунка (thumb), используя специфичные для браузеров псевдоэлементы. Задания построены от простого изменения базовых стилей до применения состояний и сброса стандартного вида для полной кастомизации. Обратите внимание, что стилизация ползунков требует использования префиксных псевдоэлементов для поддержки разных браузеров (WebKit/Blink и Firefox).

Список тем

Стилизация дорожки ползунка (WebKit)

Измените внешний вид дорожки (track) ползунка для браузеров на движке WebKit (Chrome, Safari, Edge). Сделайте дорожку с закругленными углами и светло-серым фоном. Вам нужно указать правильный псевдоэлемент.

CSS
input[type="range"] {
  width: 90%;
}

input[type="range"]input1 {
  width: 100%;
  height: 8px;
  cursor: pointer;
  background: #d3d3d3;
  border-radius: 4px;
}
HTML
<label for="volume">Громкость:</label>
<input type="range" id="volume" name="volume" min="0" max="100" value="50">
Для стилизации дорожки ползунка в WebKit-браузерах используется псевдоэлемент `::-webkit-slider-runnable-track`. Добавьте его к селектору `input[type="range"]`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Стилизация дорожки ползунка (Firefox)

Теперь стилизуйте дорожку ползунка для браузера Firefox. Как и в предыдущем задании, сделайте дорожку с закругленными углами и светло-серым фоном, но используя псевдоэлемент для Firefox.

CSS
input[type="range"] {
  width: 90%;
}

input[type="range"]input1 {
  width: 100%;
  height: 8px;
  cursor: pointer;
  background: #d3d3d3;
  border-radius: 4px;
}
HTML
<label for="volume">Громкость:</label>
<input type="range" id="volume" name="volume" min="0" max="100" value="50">
Для стилизации дорожки ползунка в Firefox используется псевдоэлемент `::-moz-range-track`. Добавьте его к селектору `input[type="range"]`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Сброс стандартных стилей ползунка

Перед применением кастомных стилей к бегунку (thumb), часто необходимо сбросить стандартные стили браузера для самого элемента `input[type="range"]`. Используйте свойство `appearance` со значением `none`.

CSS
input[type="range"] {
  width: 90%;
  input1: none; /* Сброс стандартных стилей */
  background: transparent; /* Убираем фон по умолчанию, если он есть */
}

/* Стили для дорожки (можно добавить из предыдущих заданий) */
input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8px;
  cursor: pointer;
  background: #d3d3d3;
  border-radius: 4px;
}

input[type="range"]::-moz-range-track {
  width: 100%;
  height: 8px;
  cursor: pointer;
  background: #d3d3d3;
  border-radius: 4px;
}
HTML
<label for="opacity">Прозрачность:</label>
<input type="range" id="opacity" name="opacity" min="0" max="1" step="0.1" value="0.7">
Чтобы убрать стандартное оформление элемента управления, примените к селектору `input[type="range"]` CSS-свойство `appearance` со значением `none`. Это позволяет более предсказуемо применять свои стили.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Стилизация бегунка (Thumb) - WebKit

Стилизуйте бегунок (thumb) ползунка для WebKit-браузеров. Сделайте его круглым, синего цвета и немного большего размера, чем дорожка. Не забудьте, что вы уже сбросили стандартные стили.

CSS
input[type="range"] {
  width: 90%;
  appearance: none;
  background: transparent;
  height: 20px; /* Общая высота для выравнивания */
}

input[type="range"]:focus {
  outline: none;
}

input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8px;
  cursor: pointer;
  background: #d3d3d3;
  border-radius: 4px;
}

input[type="range"]input1 {
  input2: none; /* Важно для кастомного вида */
  height: 18px;
  width: 18px;
  border-radius: 50%;
  background: #007bff;
  cursor: pointer;
  margin-top: -5px; /* (track_height - thumb_height) / 2 */
}
HTML
<label for="brightness">Яркость:</label>
<input type="range" id="brightness" name="brightness" min="0" max="100" value="75">
Используйте псевдоэлемент `::-webkit-slider-thumb` для стилизации бегунка в WebKit. Примените к нему свойства `height`, `width`, `background`, `border-radius` и `cursor`. Также может потребоваться `margin-top` с отрицательным значением, чтобы вертикально центрировать бегунок относительно дорожки.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Стилизация бегунка (Thumb) - Firefox

Аналогично предыдущему заданию, стилизуйте бегунок (thumb) для Firefox. Сделайте его круглым, синего цвета и с небольшой рамкой. Учтите особенности стилизации для Firefox.

CSS
input[type="range"] {
  width: 90%;
  appearance: none;
  background: transparent;
}

input[type="range"]:focus {
  outline: none;
}

input[type="range"]::-moz-range-track {
  width: 100%;
  height: 8px;
  cursor: pointer;
  background: #d3d3d3;
  border-radius: 4px;
}

input[type="range"]input1 {
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #007bff;
  input2: pointer;
  border: 1px solid #0056b3;
}
HTML
<label for="contrast">Контраст:</label>
<input type="range" id="contrast" name="contrast" min="0" max="100" value="60">
Для Firefox используйте псевдоэлемент `::-moz-range-thumb`. Примените к нему свойства `height`, `width`, `background`, `border-radius`, `border` и `cursor`. Сброс `appearance` для самого input уже должен быть сделан.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Состояния :hover и :active для бегунка (WebKit)

Добавьте интерактивности: измените цвет фона бегунка при наведении (:hover) и при нажатии (:active) для WebKit-браузеров.

CSS
input[type="range"] {
  width: 90%;
  appearance: none;
  background: transparent;
  height: 20px;
}
input[type="range"]:focus { outline: none; }

input[type="range"]::-webkit-slider-runnable-track {
  width: 100%; height: 8px; cursor: pointer;
  background: #d3d3d3; border-radius: 4px;
}

input[type="range"]::-webkit-slider-thumb {
  appearance: none; height: 18px; width: 18px;
  border-radius: 50%; background: #007bff;
  cursor: pointer; margin-top: -5px;
  transition: background .2s ease-in-out;
}

/* Стиль при наведении */
input[type="range"]::-webkit-slider-thumbinput1 {
  background: #0056b3;
}

/* Стиль при нажатии */
input[type="range"]::-webkit-slider-thumbinput2 {
  background: #004085;
}
HTML
<label for="saturation">Насыщенность:</label>
<input type="range" id="saturation" name="saturation" min="0" max="100" value="80">
Используйте псевдоклассы `:hover` и `:active` в сочетании с псевдоэлементом `::-webkit-slider-thumb`. Например: `input[type="range"]::-webkit-slider-thumb:hover { ... }`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

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

Улучшите доступность ползунка, добавив визуальное выделение, когда он получает фокус. Например, добавьте тень к бегунку при фокусе (для обоих типов браузеров).

CSS
input[type="range"] {
  width: 90%;
  appearance: none;
  background: transparent;
  height: 20px;
}
input[type="range"]:focus { outline: none; }

/* --- Дорожка --- */
input[type="range"]::-webkit-slider-runnable-track {
  width: 100%; height: 8px; cursor: pointer;
  background: #d3d3d3; border-radius: 4px;
}
input[type="range"]::-moz-range-track {
  width: 100%; height: 8px; cursor: pointer;
  background: #d3d3d3; border-radius: 4px;
}

/* --- Бегунок --- */
input[type="range"]::-webkit-slider-thumb {
  appearance: none; height: 18px; width: 18px;
  border-radius: 50%; background: #28a745;
  cursor: pointer; margin-top: -5px;
}
input[type="range"]::-moz-range-thumb {
  height: 16px; width: 16px; border-radius: 50%;
  background: #28a745; cursor: pointer; border: none;
}

/* --- Стили фокуса --- */
input[type="range"]input1::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.5);
}
input[type="range"]input2::-moz-range-thumb {
  box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.5);
}
HTML
<label for="blur">Размытие:</label>
<input type="range" id="blur" name="blur" min="0" max="10" value="2">
Используйте псевдокласс `:focus` на основном элементе `input[type="range"]`, а затем стилизуйте соответствующий псевдоэлемент бегунка (`::-webkit-slider-thumb` или `::-moz-range-thumb`).
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру