需要CSS添加到jQuery的滑塊

我使用這個滑塊： http://docs.jquery.com/UI/Slider 需要CSS添加到jQuery的滑塊

我需要改變滑塊的顏色處理&滑塊。由於我是jQuery的新手，我無法弄清楚如何去做。任何人都可以幫忙嗎？

2012-08-30 benjamin54

其實，我遇到了同樣的問題，這是怎麼了，我解決了它有用：

我的HTML標記是這樣的：

<div id="slider" class="hidden"> 
    <input type="text" id="sliderAmount" value="30% to 90%" readonly="readonly"/>    
</div>

我手動添加的類與jQuery把手把這樣的：

$(document).ready(function(){ 
    $("#slider a").addClass("myClassForSliderHandle"); 
});

，當你看代碼（檢查中鉻元素）看起來是這樣的（因爲jQueryUI的轉動車把到a標籤）：

<a class="ui-slider-handle ui-state-default ui-corner-all myClassForSliderHandle" href="#"></a>

和我說這在我的css文件：

.myClassForSliderHandle { 
    background-color: yellow !important; 
    background-image: none !important; 
}

，這是我得到的結果是： enter image description here

的淵源，我用主題blitzer其作爲你可以看到這個鏈接沒有黃色的把手。

編輯：如何改變滑塊的顏色：如果你看一下類（我用的檢查在Chrome瀏覽器元件）被應用到你看到這個滑塊：

.ui-widget-header { 
    border: 1px solid #E3A1A1; 
    background: #C00 url(images/ui-bg_highlight-soft_15_cc0000_1x100.png) 50% 50%   repeat-x; 
    color: white; 
    font-weight: bold; 
}

現在，爲了改變，你必須刪除背景圖像滑塊的顏色，只是嘗試這樣的（我想和它的作品）：

.ui-widget-header { 
    border: 1px solid #E3A1A1; 
    background: green; 
    color: white; 
    font-weight: bold; 
}

該類位於jQuery UI的CSS文件（在我案例jquery- UI-1.8.16.custom.css）。

希望這能解決您的問題。

來源

2012-08-30 08:53:12 Nikola

謝謝。我能夠改變滾動手柄的顏色。但滑塊的顏色沒有改變。是否有可能改變它的默認顏色（即使滑塊被移動，滑塊的顏色保持不變，例如前紅色）。 – benjamin54

@ benjamin54：請參閱我的編輯，我添加了關於如何更改滑塊欄顏色的信息。 – Nikola

好吧，我明白了。我對CSS中的類（.ui-widget-content）進行了更改以實現此目的。 – benjamin54

你必須重寫css類來自定義你想要的顏色，或者你必須應用jQuery提供的主題。嘗試更改link頁右側的主題。它可以爲你

來源

2012-08-30 08:46:21 muthu

最簡單的解決方案是使用jQueryUI themeroller。只需在那裏創建你自己的風格，當你完成後點擊「下載主題」。它會讓你下載你自定義風格的jQueryUI庫。

或者，您將不得不爲特定的jQueryUI類重寫CSS，但它可能變得非常複雜。

來源

2012-08-30 08:57:47

實際上，我有同樣的確切問題，我不能爲我的生活弄清楚如何改變把手 - 沒有選擇在美樂家（*添加這個請jQueryUI，如果你正在聽*），我張貼我的答案作爲「解決方法」，爲我工作。 – Nikola

@nikola，滑塊控制柄使用jQueryUI中的可點擊部分的樣式Themeroller（默認，懸停和活動狀態）。 [** Here **]（http://tinyurl.com/9766da6）是一個帶有滑塊的主題，看起來有點類似於解決方案中的內容。 –

需要CSS添加到jQuery的滑塊

回答

相關問題