Jak stylować <input type = 'range' /> w IE10

Question

Chcę ustawić element <input type='range' /> w IE10.

Domyślnie IE 10 styl element tak:

Chcę dostosować się nieco, powiedzmy, zmianę koloru niebieskiego na czerwony, szary do czarnego, małe bary żółty, mały czarny skruber do białego. Próbowałem zastąpić właściwość background-color i właściwość color w CSS. Ale to nie zadziałało.

Wszelkie pomysły?

Answer 1

Istnieje wiele pseudo elementów, których można użyć do sterowania stylem w IE10.

input[type="range"]::-ms-fill-upper { 
    background-color: green; 
} 

Koloruje część po kciuku. Do stylu przed użyciem kciuka:

input[type="range"]::-ms-fill-lower { 
    background-color: lime green; 
} 

Patrz np http://jsfiddle.net/K8WyC/4/

do stylizacji kciuka można wykorzystać :: - MS-kciuk, natomiast znaki kleszczy może być stylizowany z ::-ms-ticks-before, ::-ms-ticks-after lub ::-ms-track (ta ostatnia stylizuje obie strony).Możesz dowiedzieć się więcej na temat różnych pseudo-elementów kontroli na http://msdn.microsoft.com/en-us/library/ie/hh869604(v=vs.85).aspx

style prosicie można osiągnąć jak w poniższej skrzypce: http://jsfiddle.net/K8WyC/8/

Answer 2

można wykorzystać elementy pseudo Microsoft CSS:

• :: - ms-fill-niższy
• :: - ms-fill-górna
• :: - ms-kciuk
• :: - ms-ti CKS-before
• :: - ms-kleszcze-po
• :: - ms-kleszcze
• :: - ms-tooltip

Here the full Microsoft pseudo list...

IE10

Here is a page with styled IE10 range controls (Open with IE10)

WebKit

WebKit shadow DOM

Inne przeglądarki

How to style range control for multiple browsers

Answer 3

w poprzedniej odpowiedzi,

::-ms-ticks 

powinien przeczytać

::-ms-track 

(co jest zwykłym utworem). Kolor zaznaczenia jest ustalany przez:

::-ms-track {color:red;} 

Wysokość tyknięcia to wysokość ścieżki, a szerokość nie może być ustawiona. Kleszcze są usuwane, co jest dobrze znane ze

::-ms-track {color:transparent;} 

pseudo-elementami

::-ms-ticks-before, 
::-ms-ticks-after { 
display:block; (or inline-block) 
color:red; 
height:10px; 
} 

spowodować dodatkowe kleszczy powyżej i poniżej toru. Można ustawić ich kolory i wysokość. Szerokość kleszczy nie może być ustawiona. wyświetlacz wydaje się wymagany.

Internet Explorer od IE10 ma domyślnie wypełnienie . Górna wyściółka to 17 pikseli, a dolna - 32 pikseli. Domyślnie jest to suwak wysokości. Z tego powodu można zastosować

padding:0px; 

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

(Ponieważ nie mogę jeszcze komentować, zamieszczam w ten sposób).