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

【问题标题】：Styling input type range elements in Webkit browsers在 Webkit 浏览器中设置输入类型范围元素的样式
【发布时间】：2011-09-27 14:22:37
【问题描述】：

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

【问题讨论】：

输入类型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 w3.org/TR/html-markup
ohhh 抱歉，仅限输入类型范围。

标签： css html webkit

【解决方案1】：

David B. Calhoun 在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%;
}

【讨论】：

【解决方案2】：

我只听说过range，而不是slider。

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

【讨论】：

如何改变颜色和外观，也是他们改变旋钮外观的任何方式。