在Webkit浏览器中设置输入类型范围元素的样式

Question

有没有办法<input type="range">为Webkit浏览器设置样式元素？

Answer 1

有一个非常好的关于造型范围的文章让它看起来像 David B. Calhoun写的iPhone滑块.

我认为博客文章应涵盖范围输入类型样式的大多数方面.

这是一些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%;
}

Answer 2

我只听说过这种类型range，没有听说过slider。

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