更改范围滑块手柄颜色（单击时）

Question

<div id="slider">
    <br><span>0</span>
    <span style="margin-left: 3.3%">100</span>
    <span style="margin-left: 9.8%">300</span>
    <span style="margin-left: 16.4%">600</span>
    <span style="margin-left: 16.2%">900</span>
    <span style="margin-left: 15.7%">1200</span>
    <span style="margin-left: 13.3%">1500</span>
</div>

我正在使用默认的 jquery 范围滑块。单击手柄时，手柄头变为蓝色（如图所示）。我正在将这个原始 html 添加到 wordpress 主题中。它在本地测试中运行良好（没有 wordpress 主题）。有没有点击覆盖颜色。蓝色和我的网站主题不顺利。

正常点击时

Answer 1

见下笔：

https://codepen.io/barrychapman/pen/vmyjLR

只需将 background-color css 属性和 !important 应用于选择器：

#slider-range > span.ui-slider-handle:active {
    background-color: #0B0 !important;
}

你应该可以开始了。检查笔的结果。

Answer 2

使用 devtools，您会注意到 CSS 更改在您单击手柄时应用。单击后只需记下 CSS 行号，该规则就是您需要更改的内容。很可能是这样的：

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
 border: 1px solid #000;/*changed this to black*/
 background: #000;/*changed this to black*/
 font-weight: normal;
 color: #ffffff;
}

如果它被覆盖，那么当然使用更高的选择器，例如在开始时使用 body 和 !important 作为最后的手段。

更改范围滑块手柄颜色（单击时）

Change Range Slider Handle Color (On Click)

jquery

html

css

wordpress

rangeslider