如何更改高光效果的背景颜色？

Question

我有一个jquery移动滑块。

<input name="slider-1" id="slider-1" data-highlight="true"min="0" 
                                            max="100" value="50" type="range">

我想更改滑块轨道上高光填充的颜色？ （默认为蓝色）。 这是我的代码，但它不起作用

$("#slider-1").effect("highlight", { color: "#ff00ff" }, 3000);

由于

Answer 1

您使用了错误的选择器来更改滑块的默认颜色。

div.ui-btn-active 这是正确的

div.ui-btn-active{
    background: #ff00ff;
}

使用jQuery，

$("div.ui-btn-active").css("background","#ff00ff");

选中此fiddle

Answer 2

我认为CSS解决方案更好：

#slider-3::selection
{
    color:#ffffff;
    background-color:#ff0000;
}

#slider-3::-moz-selection   /* firefox*/
{
    color:#ffffff;
    background-color:#ff0000;
}

Answer 3

在此css类中添加颜色代码，不要更改类名。

.ui-btn-active {
   background: linear-gradient(#5393C5, #6FACD5) repeat scroll 0 0 #5393C5;
   border: 1px solid #2373A5;
   color: #FFFFFF;
   cursor: pointer;
   font-family: Helvetica,Arial,sans-serif;
   font-weight: bold;
   text-decoration: none;
   text-shadow: 0 1px 1px #3373A5;
 }

Answer 4

使用.css属性，并希望使用animate功能更改动画背景。

 $("#slider-3").css("background-color","#ff00ff");

jQuery .css Documentation