javascript - 为 Jquery 的 slider handle 应用新的背景颜色

Question

我不确定为什么我会遇到这样的麻烦。我浏览了 Jquery 的 slider css 文件并找到了句柄的类名。 .ui-slider-handle它甚至在 API 文档中说这是它的名称 Slider API doc link , 但每当我添加 background或 background-color并给它一个颜色，它什么都不做。尝试让 Handlebars 覆盖整个酒吧也是同样的事情。

我在网站上创建了一个演示页面，我必须展示我正在尝试做什么。 Demo page

.ui-slider-handle {
  height: 100%;
  color: #000;
  margin: 0;
}

如果有人不介意的话。我试图让“预算”一词出现在红色部分(预算范围)，但是当我应用它时:<div class="ui-slider-range">Budget</div>在我的 html 中，预算一词显示在 slider 的最左侧。 html 是这样的:

<div id="slider-range">
   <div class="ui-slider-range">Budget</div>
</div>

.ui-slider-range {
  background: red;
  text-align: center;
}

如何添加 background-color到 slider handle 并添加“预算”一词，使其位于红色区域的中间？

Answer 1

要更改 ui-slide-handler 颜色，请尝试:

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {   
    background: yellow !important; 
}

这是要覆盖的规则。

原规则如下:

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    border: 1px solid #d3d3d3;
    background: #e6e6e6 url("images/ui-bg_glass_75_e6e6e6_1x400.png") 50% 50% repeat-x;
    font-weight: normal;
    color: #555555;
}