Question

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

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

＆＃13;

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;
}

＆＃13;

<input type="range" />

＆＃13;

＆＃13; 此示例将按照我在Microsoft Edge，moz：// Firefox和Internet Explorer上的预期工作，但在Chrome上看起来有所不同。

我已经阅读了Styling input range for webkit with pure CSS，并尝试了我的，但是当多个输入[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，它是用于自定义范围滑块的跨浏览器代码生成器。但是，它并没有为::-moz-range-progress区域设置样式。我找到的其他示例（包括此Codepen代码段）使用已弃用且不再具有功能的deep阴影穿孔选择器。对于完全跨浏览器的解决方案，您必须制作自己的元素。

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

1 个答案: