Элементы ввода типа типа в браузерах Webkit

Question

Есть ли способ стиля <input type="range"> элементов для браузеров Webkit?

Answer 1

Я только слышал о типе range, а не slider.

input[type="range"] { 
    -webkit-appearance: slider-horizontal; 
} 

Answer 2

Существует очень хорошая статья на styling a range to make it look like an iPhone slider написана Дэвидом Б. Калхун.

Я думаю, что сообщение в блоге должно охватывать большинство аспектов стиля ввода диапазона.

Вот некоторые из CSS:

input[type='range']::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    width: 68px; 
    height: 44px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    -webkit-gradient(
     linear, 
     left top, 
     left bottom, 
     color-stop(0, #fefefe), 
     color-stop(0.49, #dddddd), 
     color-stop(0.51, #d1d1d1), 
     color-stop(1, #a1a1a1) 
    ); 
    background-repeat: no-repeat; 
    background-position: 50%; 
}