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

<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主题）。无论如何，在点击时覆盖颜色。蓝色和我的网站主题不太好。更改范围滑块手柄颜色（点击）

普通在点击

来源

2017-04-26 Iz Dev

你有没有试过检查你的浏览器的调试面板中的元素？大多数体面的浏览器会让你将CSS选择器复制到剪贴板。然后你可以使用它来应用你的背景属性。 –

你可以粘贴你用来渲染这些的CSS吗？这样我们可以有效地告诉你需要添加什么以及在哪里。这听起来像WordPress的主题CSS覆盖任何你已经放置的处理器的选择。尝试添加！重要的是你的CSS属性声明的结尾。或者尝试使选择器更具体。 –

请参见下面的笔：

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

只需将background-color CSS属性与!important适用于选择：

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

你应该很好走。检查笔的结果。

来源

2017-04-26 03:39:29

**注意：核心演示直接从http://jqueryui.com/slider/#range –

使用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 { 
 
\t border: 1px solid #000;/*changed this to black*/ 
 
\t background: #000;/*changed this to black*/ 
 
\t font-weight: normal; 
 
\t color: #ffffff; 
 
}

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

来源

2017-04-26 03:39:32

解除，这不会完成OP要查找的内容。 –

有趣，为什么不呢？刚刚用笔在它上面试过了，它工作。 –

因为你没有针对滑块的句柄。 –

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

回答

相关问题