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

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

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

＆＃13;

＆＃13;

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

Answer 2

请参阅以下笔：

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

只需将带有background-color的{​​{1}} css属性应用于选择器：

!important

你应该好好去。检查笔的结果。