创建自定义输入类型范围跨浏览器

Question

我正在尝试使用一些css自定义html5输入类型=范围标记，到目前为止我已经使用webkit制作了一些内容：

div#timeline input[type="range"] {
    -webkit-appearance: none;
    background-color: darkgray;
    height: 2px;
        border-right: black solid 4px;
        border-left: black solid 4px;
}

div#timeline input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    position: relative;
    top: 0px;
    z-index: 1;
    width: 16px;
    height: 8px;
    background: #696060;
}

然而，似乎这只适用于chrome，是否可以制作自定义滑块，以便每个浏览器都相同？ 我正在考虑制作能模仿输入范围行为的东西，但我在网上找不到任何东西，而且我对javascript和其他内容很新

Answer 1

您可以尝试使用一些javascript库或jQueryTools等javascript库。最后一个有很简单的演示：

http://jquerytools.org/release-notes/index.html#form

不幸的是，输入范围不能用跨浏览器的方式设置，现在只需要纯CSS，我们需要再等一点。