Question

我想根据滑块位置为滑块提供两种不同颜色的颜色。一个颜色应该在滑块之前，另一个颜色应该在滑块之后。我使用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"  />

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

Answer 1

我注意到你昨天问了一个similar question，然后我看了一眼，但实际上找不到你想要达到的效果。我有更多的时间来思考它并做一些研究并找到解决方案。

感谢Robert Biggs在css3wizardry上的his post上提供了一个解决方案，用于构建<div>代码和prototype的滑块和滑块。但是，既然你想要一个HTML5 <input>解决方案，我试图对该元素做同样的事情。

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

另请阅读this comment以及有关样式表单元素缺点的上一个问题的评论。

如何给滑块提供不同的背景颜色？

1 个答案: