html5入力範囲のスライダ垂直に対してCSSを使用してのみカスタマイズするにはどうすればよいですか？

Question

私はhtml5入力[範囲]の外観が垂直の場合にカスタマイズしたいと思います。

CSS 3指示文が変換されないようにしたい：を回転させると、UIレイアウトが複雑になります。

WebkitのCSSプロパティは私の文脈で認識され、他のベンダーは私の場合は役に立たない。

カスタマイズが水平デフォルトのスライダーのための良い動作しますが、垂直方向の1のために、あなたはここで見ることができません。

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

そうでない場合は、ここでのコードだ：

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

******私が正しくあなたを理解していればUPDATED ANSWER ****

、あなたはあなたの横何のように垂直に見えるようにしようとしています外見は？もしそうなら：

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 < - UPDATED