Синтаксис <code><em>Селектор</em>::-ms-fill-lower { ... } Позначення Опис Приклад <тип> Вказує тип значення. <розмір> A && B Значення повинні виводитися у вказаному порядку. <размер> && <колір> A | B"> Синтаксис <code><em>Селектор</em>::-ms-fill-lower { ... } Позначення Опис Приклад <тип> Вказує тип значення. <розмір> A && B Значення повинні виводитися у вказаному порядку. <размер> && <колір> A | B"> Синтаксис <code><em>Селектор</em>::-ms-fill-lower { ... } Позначення Опис Приклад <тип> Вказує тип значення. <розмір> A && B Значення повинні виводитися у вказаному порядку. <размер> && <колір> A | B">
CSS властивості
ГлавнаяДовідник CSSПсевдоелемент CSS ::-ms-fill-lower

Псевдоелемент CSS ::-ms-fill-lower

234

Задає стиль слайдера (input type="range"). Стиль застосовується до доріжки слайдера від меншого значення до поточного значення, де розташовується повзунок. field field-name-field-css-syntax field-type-text-long field-label-above">

Синтаксис

<code><em>Селектор</em>::-ms-fill-lower { ... }

Позначення

Опис Приклад
<тип> Вказує тип значення. <розмір>
A && B Значення повинні виводитися у вказаному порядку. <размер> && <колір>
A | B Вказує, що потрібно вибрати лише одне значення із запропонованих (A або B). normal | small-caps
A || B Кожне значення може використовуватися самостійно або спільно з іншими у довільному порядку. width || count
[ ] Групує значення. [ crop || cross ]
* Повторювати нуль або більше разів. [,<час>]*
+ Повторювати один або більше разів. <число>+
? Вказаний тип, слово або група не є обов'язковим. inset?
{A, B} Повторювати не менше A, але не більше B разів. <радіус>{1,4}
# Повторювати один або більше разів через кому. <час>#

Значення

Ні.

Приклад

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>::-ms-fill-lower</title> <style> input[type="range"] { padding: 20px; border: 1px solid #e4e6ec; width: 100%; box-sizing: border-box; border-radius: 4px; } 
input[type="range"]::-ms-fill-lower { background: #50a2de; }
</style>
</head>
<body> <p>Вкажіть діапазон цін</p> <p><input type="range" min="0" max="10000"></p>
</body>
</html>

Результат цього прикладу показаний на рис. 1.

Стиль слайдера

Мал. 1. Стиль слайдера

Браузери

10 12

Браузери

У таблиці браузерів застосовуються такі позначення.

  •  — властивість повністю підд браузером з усіма допустимими значеннями;
  •   — властивість браузером не сприймається та ігнорується;
  •   ;— при роботі можлива поява різних помилок, або властивість підтримується лише частково, наприклад, не всі допустимі значення діють або властивість застосовується не до всіх елементів, зазначених у специфікації.

Число вказує версію браузера , з якої властивість підтримується.