在Webkit浏览器中对输入类型为range的元素进行样式设置

Question

有没有办法为Webkit浏览器样式化元素？

- Vinay Verma

---

输入类型 button, checkbox, file, hidden, image, password, radio, reset, submit, text 新的输入类型 reset, image, datetime, datetime-local, date, month, time, week, number, range, email, url, search, tel, color。请参考 http://www.w3.org/TR/html-markup/。 - Blur

哦，抱歉，它只能是输入类型范围。 - Vinay Verma

Answer 1

有一篇非常不错的文章 讲述如何将range input样式设置成类似于iPhone滑块的外观，作者是David B. Calhoun。

我认为博客文章应该覆盖大部分设置range input样式的方面。

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

- gak

Answer 2

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

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

- BoltClock

---

如何更改颜色和外观，是否有办法改变旋钮的外观？ - Vinay Verma