css - styling a vertical HTML5 range input -

css - styling a vertical HTML5 range input -

i'm trying style vertical range input , have:

input[type='range'] { -webkit-appearance: slider-vertical; background-color: #ccc; height: 158px; width: 2px; margin: 8px auto; } input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; border-radius: 20px; background-color: #3ebede; height: 30px; width: 30px; }

but seems because have '-webkit-appearance: slider-vertical;' create vertical, styles won't apply.

is there way style vertical range without transforms/plugins...?

note: need work on chrome

update: here jsfiddle have.

so answer, guess. need utilize other selectors. read more here.

-webkit-transform:rotate(90deg); - create vertical, tweak margins suit.

google friend!

from article:

webkit based browsers (chrome, safari, opera)

in webkit based browsers, track styled special pseudo selector ::-webkit-slider-runnable-track, , thumb ::webkit-slider-thumb.

custom focus styles can applied on thumb , track. if go route, you'll have remove default focus styles on input itself.

here an illustration in fiddle. css taken previous source.

html

<input type="range" />

css

input[type=range]{ -webkit-appearance: none; } input[type=range]::-webkit-slider-runnable-track { width: 300px; height: 5px; background: #ddd; border: none; border-radius: 3px; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; border: none; height: 16px; width: 16px; border-radius: 50%; background: goldenrod; margin-top: -4px; } input[type=range]:focus { outline: none; } input[type=range]:focus::-webkit-slider-runnable-track { background: #ccc; }

css html5