Я хочу стилизовать элемент <input type='range' /> в IE10.
По умолчанию IE 10 стилирует этот элемент следующим образом:
Я хочу немного настроить его, скажем, смены цвета синего на красный, от серого до черного, от маленьких до желтых, от черного черного скруббера до белого. Я попытался переписать свойство background-color и свойство color в CSS. Но это не сработало.
Любые идеи?
Существует несколько псевдоэлементов, которые можно использовать для управления элементами диапазона в IE10.
input[type="range"]::-ms-fill-upper {
background-color: green;
}
Будет окрашивать деталь после большого пальца. Для стиля перед использованием большого пальца:
input[type="range"]::-ms-fill-lower {
background-color: lime green;
}
См. например http://jsfiddle.net/K8WyC/4/
Для стиля большого пальца вы можете использовать:: - ms-thumb, в то время как отметки меток можно стилизовать с помощью ::-ms-ticks-before, ::-ms-ticks-after или ::-ms-track (последний стилирует обе стороны). Вы можете узнать больше о различных псевдоэлементах элементов управления в http://msdn.microsoft.com/en-us/library/ie/hh869604(v=vs.85).aspx
Стили, о которых вы просите, могут быть достигнуты, как в следующем скрипте: http://jsfiddle.net/K8WyC/8/
Вы можете использовать псевдоэлементы Microsoft CSS:
Здесь полный псевдо-список Microsoft...
IE10
Вот страница со стильными элементами управления диапазоном IE10 (Открыть с помощью IE10)
WebKit
Другие браузеры
в предыдущем ответе,
::-ms-ticks
должен читать
::-ms-track
(это просто обычный трек). Цвет галочки устанавливается
::-ms-track {color:red;}
Высота тика - это высота дорожки, а ширина не может быть установлена. Клещи подавляются, как известно, с помощью
::-ms-track {color:transparent;}
Псевдоэлементы
::-ms-ticks-before,
::-ms-ticks-after {
display:block; (or inline-block)
color:red;
height:10px;
}
создать дополнительные отметки выше и ниже дорожки. Можно установить их цвета и их высоты. Ширина тика не может быть установлена. отображение кажется необходимым.
Internet Explorer, поскольку IE10 имеет стандартную по умолчанию по умолчанию. Верхнее дополнение - 17 пикселей, нижнее - 32 пикселя. Это означает, что по умолчанию используется ползунок. Поэтому
padding:0px;
(Как я еще не могу прокомментировать, я отправляю так).