css - html5の入力範囲slider-verticalをcssだけでカスタマイズするには?

Question

html5 input[range] が垂直の場合の外観をカスタマイズしたいと思います。

transform:rotate のような CSS 3 ディレクティブを避けたい場合、UI レイアウトが複雑になります。

Webkit css プロパティは私のコンテキストでは認識されますが、私の場合、他のベンダーは役に立ちません。

カスタマイズは、水平方向のデフォルト スライダーではうまく機能しますが、垂直方向のスライダーでは機能しません。ここで確認できます。

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