How to configure only css for html5 range of sliders - vertical?

Question

I would like to customize the appearance of the html5 input [range] when it is vertical.

Want to avoid CSS 3 directives like transform: rotate , which complicates the layout of the user interface.

Webkit css properties are recognized in my context, other providers are useless in my case.

The setup works well for the horizontal slider by default, but not for the vertical one, you can look here:

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

Otherwise, here is 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; } 

Answer 1

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

If I understand you correctly, are you trying to make the vertical view look like your horizontal view? If yes:

  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