如何风格HTML5范围输入有不同的颜色前后滑块？ [英] How to style HTML5 range input to have different color before and after slider?

问题描述

>

左侧为绿色，右侧为灰色。如上图所示是完美的。最好是一个纯CSS解决方案（只需要担心WebKit）。

这是可能的吗？

解决方案

是的，这是可能的。虽然我不会推荐它，因为 输入范围 实际上并不是所有浏览器都能正常支持，因为它是在HTML5中添加的一个新元素，HTML5只是一个草稿（并且会长久），所以对样式它可能不是最好的选择。 / p>

此外，你还需要一点JavaScript。为了简单起见，我为了使用 jQuery 库而自由。

此处您去： http://jsfiddle.net/JnrvG/1/ 。

I want the left side to be green and the right side to be gray. As pictured above would be PERFECT. Preferably a pure CSS solution (only need to worry about WebKit).

Is such a thing possible?

解决方案

Yes, it is possible. Though I wouldn't recommend it because input range is not really supported properly by all browsers because is an new element added in HTML5 and HTML5 is only a draft (and will be for long) so going as far as to styling it is perhaps not the best choice.

Also, you'll need a bit of JavaScript too. I took the liberty of using jQuery library for this, for simplicity purposes.

Here you go: http://jsfiddle.net/JnrvG/1/.

这篇关于如何风格HTML5范围输入有不同的颜色前后滑块？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！