Как стиль <input type = 'range'/"> в IE10

Я хочу стилизовать элемент <input type='range' /> в IE10.

По умолчанию IE 10 стилирует этот элемент следующим образом: enter image description here

Я хочу немного настроить его, скажем, смены цвета синего на красный, от серого до черного, от маленьких до желтых, от черного черного скруббера до белого. Я попытался переписать свойство background-color и свойство color в CSS. Но это не сработало.

Любые идеи?

Ответы

Ответ 1

Существует несколько псевдоэлементов, которые можно использовать для управления элементами диапазона в 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/

Ответ 2

Вы можете использовать псевдоэлементы Microsoft CSS:

  • :: - ms-fill-lower
  • :: - мс-фасовочно-верхний
  • :: - мс-палец
  • :: - мс-тики-перед
  • :: - мс-тики-после
  • :: - мс-тики
  • :: - мс-подсказка

Здесь полный псевдо-список Microsoft...

IE10

Вот страница со стильными элементами управления диапазоном IE10 (Открыть с помощью IE10)

WebKit

WebKit shadow DOM

Другие браузеры

Как стиль управления диапазоном для нескольких браузеров

Ответ 3

в предыдущем ответе,

::-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;

. (См. https://connect.microsoft.com/IE/feedback/details/792971/input-type-range-has-vertical-padding-by-default.)

(Как я еще не могу прокомментировать, я отправляю так).