相关疑难解决方法(0)

如何设置HTML5范围输入的样式以使滑块前后有不同的颜色？

在此输入图像描述

我希望左侧是绿色,右侧是灰色.如上图所示将是完美的.最好是一个纯CSS解决方案(只需要担心WebKit).

这样的事情可能吗？

css html5 webkit input

Sha*_*oon

2013 08-23

55
推荐指数

10
解决办法

8万
查看次数

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

我造型input[type=range]使用CSS，并用做thumb和track。
所有三个( -ms, -moz, -webkit) 浏览器都有适当的前缀。

但是，我不知道什么供应商前缀适合progressWebkit 浏览器（例如 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: …

Run Code Online (Sandbox Code Playgroud)

css webkit

Lee*_*.U.

2017 05-23

5
推荐指数

1
解决办法

2958
查看次数