更改範圍滑塊手柄顏色（點擊）

<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要查找的內容。 –

有趣，爲什麼不呢？剛剛用筆在它上面試過了，它工作。 –

因爲你沒有針對滑塊的句柄。 –

更改範圍滑塊手柄顏色（點擊）

回答

相關問題