Come personalizzare solo con css per html5 slider-vertical-slider?

Question

Vorrei personalizzare l'aspetto di un input [range] html5 quando è verticale.

Desidera evitare la direttiva CSS 3 come la trasformazione: ruotare, quindi complicherà il layout dell'interfaccia utente.

Le proprietà di Webkit css sono riconosciute nel mio contesto, gli altri venditori sono inutili nel mio caso.

La personalizzazione funziona bene per il cursore di default orizzontale, ma non per quella verticale, si può guardare qui:

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

In caso contrario, ecco il codice:

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

****** AGGIORNAMENTO RISPOSTA ****

Se ho capito bene, si sta cercando di farti sembrare verticale come ciò che il vostro orizzontale sembra? In tal caso:

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