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

我使用CSS设置输入[type = range],并使用拇指和轨道完成.

所有三个(-ms,-moz,-webkit)浏览器都有正确的前缀.

但是,我不知道什么样的厂商前缀适合在Webkit浏览器上进行样式处理,例如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:// Firefox和Internet Explorer上的预期工作,但在Chrome上看起来不同.

我已经阅读了Styling input range for webkit with pure CSS,并尝试了我的,
但是当多个输入[type = range] s在一个文档上时,它会很奇怪.

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

最佳答案 据我所知,这是不可能的.以下是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,它是一个用于自定义范围滑块的跨浏览器代码生成器.但是,它没有提供一种方式来设置:: – moz-range-progress区域的样式.我发现的其他例子,包括这个Codepen片段,使用了已弃用且不再具有功能的deep阴影穿孔选择器.对于完全跨浏览器的解决方案,您必须创建自己的元素.

点赞