Wie nur mit CSS für HTML5 Eingabebereich Slider-vertikal anpassen?

Question

Ich möchte das Aussehen eines HTML5-Eingangs [Bereich] anpassen, wenn es vertikal ist.

Willst du CSS 3 Direktive wie transform vermeiden: Drehen, kompliziert es dann das UI-Layout.

Webkit CSS-Eigenschaften werden in meinem Kontext erkannt, die anderen Anbieter sind in meinem Fall nutzlos.

Die Anpassung funktioniert gut für den horizontalen Standard Schieber, aber nicht für die vertikalen, können Sie sich hier:

jsFiddle: http://jsfiddle.net/QU5VD/1/

Ansonsten hier ist der Code:

HTML

<input type="range" class="vHorizon" />

<input type="range" class="vVertical" />

CSS

input[type="range"].vHorizon { 
    -webkit-appearance: none; 
    background-color: pink; 
    width: 200px; 
    height:10px; 
} 
input[type="range"].vVertical { 
    -webkit-appearance: slider-vertical; 
    background-color: pink; 
    width: 10px; 
    height:200px; 
} 
input[type="range"]::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    background-color: red; 
    width: 20px; 
    height: 20px; 
} 

Answer 1

****** AKTUALISIERT ANTWORT ****

Wenn ich Sie richtig verstehe, Sie versuchen Sie vertikale aussehen, was Ihre horizontal zu machen sieht aus wie? wenn ja:

input[type=range].vVertical { 
    -webkit-appearance: none; 
    background-color: green; 
    width: 200px; 
    height:10px; 

     -webkit-transform:rotate(90deg);  
    -moz-transform:rotate(90deg); 
    -o-transform:rotate(90deg); 
    -ms-transform:rotate(90deg); 
    transform:rotate(90deg); 
    z-index: 0; 
} 
input[type=range].vHorizon { 
    -webkit-appearance: none; 
    background-color: pink; 
    height: 10px; 
    width:200px; 

} 
input[type="range"]::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    background-color: red; 
    width: 20px; 
    height: 20px; 
} 

fiddle < - AKTUALISIERT