How to customize only with css for html5 input ran

问题:

I would like to customize the look of a html5 input[range] when it's vertical.

Want to avoid CSS 3 directive like transform:rotate, it complicates the UI layout then.

Webkit css properties are recognised in my context, the others vendors are useless in my case.

The customisation works good for the horizontal default slider, but not for the vertical one, you can look at here :

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

Otherwise, here's the 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;
}

回答1:

******UPDATED ANSWER****

If i understand you correctly, you are trying to make you vertical look like what your horizontal looks like? if so:

    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