Webkit 的 CSS 样式输入范围较低？

Question

我正在使用 CSS 设计 input[type=range] 样式，并完成了 thumb 和 track。
三个（-ms、-moz、-webkit）浏览器都有正确的前缀。

但是，我不知道什么供应商前缀适合 Webkit 浏览器上的样式 progress，例如 Chrome。在 Internet Explorer 和 Microsoft Edge 上，-ms-fill-lower 效果很好。
在 Firefox 上，使用 -moz-range-progress 解决了问题。

input[type=range] {
 /*removes default webkit styles*/
 -webkit-appearance: none;
 
 /*fix for FF unable to apply focus style bug */
 border: 1px solid white;
 
 /*required for proper track sizing in FF*/
 width: 350px;
}

/* Webkit, Chrome & Safari */
input[type=range]::-webkit-slider-runnable-track { 
 width: 300px;
 height: 5px;
 background: #ccc;
 border: none;
 border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
 -webkit-appearance: none;
 border: none;
 height: 16px;
 width: 16px;
 border-radius: 50%;
 background: #004d66;
 margin-top: -7px;
}
input[type=range]:focus {
 outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
 background: #ddd;
}
/* moz://a Firefox */
input[type=range]::-moz-range-track {
 /* width: 150px;
 height: 5px; */
 background: #ccc;
 border: none;
 border-radius: 3px;
}
input[type=range]::-moz-range-thumb {
 border: none;
 height: 16px;
 width: 16px;
 border-radius: 50%;
 background: #004d66;
}
input[type=range]::-moz-range-progress {
 background: #33ccff;
 border-radius: 10px;
 height: 5px;
}

/*hide the outline behind the border*/
input[type=range]:-moz-focusring{
 outline: 1px solid white;
 outline-offset: -1px;
}


/* Microsoft */
input[type=range]::-ms-track {
 
 height: 2px;
 /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
 background: transparent;
 
 /*leave room for the larger thumb to overflow with a transparent border */
 border-color: transparent;
 border-width: 6px 0;

 /*remove default tick marks*/
 color: transparent;
}
input[type=range]::-ms-thumb {
 border: none;
 height: 16px;
 width: 16px;
 border-radius: 50%;
 background: #004d66;
 margin-top: 1px;
}
input[type=range]::-ms-fill-lower {
 background: #33ccff;
 border-radius: 10px;
 height: 5px;
}
input[type=range]::-ms-fill-upper {
 background: #ccc;
 border-radius: 10px;
}
input[type=range]:focus::-ms-fill-lower {
 background: #44ddff;
}
input[type=range]:focus::-ms-fill-upper {
 background: #ddd;
}

<input type="range" />

此示例在 Microsoft Edge、moz://a Firefox 和 Internet Explorer 上将按我预期的方式运行，但在 Chrome.

上看起来有所不同

我已经阅读了，并试穿了我的
但是当多个输入 [type=range] 在一个文档上时，它会奇怪地工作。

所以，问题是，
拇指已经通过的样式轨道是否有任何适当的供应商前缀，仅使用 CSS?

Answer 1

据我所知，这是不可能的。下面是 Chrome 的片段，显示了 <input type="range" />:

的 Shadow DOM 元素

<input type="range">
    #shadow-root (user-agent)
        <div style="-webkit-appearance:inherit">
            <div pseudo="-webkit-slider-runnable-track" id="track">
               <div id="thumb">
               </div>
        </div>
    </div>
</input>

一般来说，您可能想看看 range.css, it's a cross-browser code generator for custom range sliders. However, it doesn't provide a way to style the ::-moz-range-progress region. Other example's I've found, including this Codepen snippet, use the deprecated and no-longer-functional deep 阴影穿刺选择器。对于完全跨浏览器的解决方案，您必须制作自己的元素。

Webkit 的 CSS 样式输入范围较低？

Styling input range lower in CSS for Webkit?

css

webkit