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

Question

我正在尝试使用一些 css 自定义 html5 输入 type=range 标记，到目前为止，我已经使用 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 库，例如 jQueryUI 或 jQueryTools。最后一个有非常简单的演示：

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

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