Stylize HTML5 vertical input

Question

I am trying to create a vertical range input, and this is what I 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 it seems that since I have " -webkit-appearance: slider-vertical; " to make it vertical, the styles will not be applied.

Is there a way to create a vertical range without transforms / plugins ...?

Note. I only need it to work with Chrome

UPDATE: Here's a JSFiddle for what I have.

Answer 1

So this is the answer, I think. You need to use other selectors. More details here .

-webkit-transform:rotate(90deg); - , , .

Google - !

:

(, , )

webkit ::-webkit-slider-runnable-track, - ::webkit-slider-thumb.

. , .

. CSS, .

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;
}