Jak dostosować tylko za pomocą css dla suwaka zakresu wejściowego html5-vertical?

Question

Chciałbym dostosować wygląd wejścia html5 [zakres], gdy jest on pionowy.

Chcąc uniknąć dyrektywy CSS 3, takiej jak transformacja: obróć, komplikuje to układ interfejsu użytkownika.

Właściwości Webkit css są rozpoznawane w moim kontekście, inni dostawcy są bezużyteczni w moim przypadku.

Dostosowanie działa dobrze dla poziomego domyślnej suwaka, ale nie za pionową, można spojrzeć tutaj:

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

przeciwnym razie, oto kod:

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 ODPOWIEDŹ ****

Jeśli rozumiem zostanie poprawnie, próbujesz, aby ci pionowej wygląda tak, jak twój horizontal wygląda jak? jeśli tak, to:

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