如何为滑块赋予不同的背景颜色？答案

【问题标题】：how to give differnet background color to slider?如何为滑块赋予不同的背景颜色？
【发布时间】：2011-03-03 08:51:25
【问题描述】：

我想根据滑块位置为滑块提供两种不同颜色的颜色。一种颜色应该在滑块之前，另一种颜色应该在滑块之后。我使用 css 实现了其他设计。这是为输入[type=range]设置皮肤的代码。

input[type=range]{
   border: 1px solid #4ba8b1;
margin: 0px 0px 5px 5px;
background:-webkit-gradient(linear,center top, center bottom, from(#CFDCDD),to(#DFE9EA),color-stop(50%,#DFE9EA));
float:left;
pointer:cursor;
-webkit-appearance:none;
width:300px;
height:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
}
input[type=range]::-webkit-slider-thumb
{
  -webkit-appearance:none;
   border:1px solid #4ba8b1;
   background:-webkit-gradient(linear,center top, center bottom,from(#CAE8E9),to(#E4ECEC),color-stop(50%,#9ED2D1));
   background:-moz-linear-gradient(top,#CAE8E9,#9ED2D1,#E4ECEC);
   width:7px;
   height:15px;
   opacity:.7;
}

html 是：

<input type="range"  name="rangeEl" value="120" min="0" max="150"  />

它使用单一背景颜色很好地呈现输出。现在我需要为拇指之前的滑块和拇指之后的另一种颜色提供颜色。帮我！

【问题讨论】：

这在当前状态下太模糊了。您能否重新措辞一下以更清楚地说明您想要什么以及您的问题到底是什么？然而，滑块控件在纯 CSS 中是不可行的
我希望你现在明白我的问题..

标签： css

【解决方案1】：

我注意到你昨天问了一个similar question，然后我看了看，但无法真正弄清楚你想要实现什么。我有更多的时间来考虑它并进行一些研究并找到解决方案。

感谢 css3wizardry 上 his post 上的 Robert Biggs 提供的解决方案，该解决方案通过 <div> 标签和 prototype 构建滑块和拇指。但既然你想要一个 HTML5 <input> 解决方案，我已经尝试对那个元素做同样的事情。

请查看demo。请注意，它使用jQuery events，但目前仅更新mousedown 上的background-color。它没有正确初始化，也没有更新mousemove 上的颜色，但认为自己实现它是一个很好的练习:) 该演示适用于 Chrome 11 和 Safari 5。

还请阅读 this comment 和 cmets 关于您之前关于样式化表单元素的缺点的问题。

【讨论】：