應用新的背景色jQuery的滑塊處理

我不知道爲什麼我有這樣的煩惱與此有關。我瀏覽了Jquery的滑塊css文件並找到了句柄的類名。 .ui-slider-handle它甚至說，在API文檔即是它Slider API doc link的名字，但每當我添加background或background-color並賦予它的顏色，它什麼都不做。嘗試讓手柄覆蓋整個酒吧也是一樣。應用新的背景色jQuery的滑塊處理

我的網站上我必須證明什麼，我試圖做創建的演示頁。 Demo page

.ui-slider-handle { 
    height: 100%; 
    color: #000; 
    margin: 0; 
}

另外，如果有人不介意。我試圖讓「預算」一詞出現在紅色部分（預算範圍）中，但是當我將這個：<div class="ui-slider-range">Budget</div>應用到我的html中時，字詞Budget顯示在滑塊的最左側。的HTML是這樣的：

<div id="slider-range"> 
    <div class="ui-slider-range">Budget</div> 
</div> 

.ui-slider-range { 
    background: red; 
    text-align: center; 
}

我如何可以添加background-color到滑塊手柄，加上「預算」，因此，它是在紅色區域的中間？

來源

2016-02-19 Paul

嘗試檢查與檢查元素的工具，如果你的規則是由插件 – silviagreen

dinamically時創建的，他們將不得不如果礦沒有顯示出來「覆蓋」。我甚至添加了'！important' ......'background-color：＃000！important;' – Paul

要更改用戶界面，滑動處理顏色，試試：

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { 
    background: yellow !important; 
}

這是要重寫規則。

原來的規則如下：

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { 
    border: 1px solid #d3d3d3; 
    background: #e6e6e6 url("images/ui-bg_glass_75_e6e6e6_1x400.png") 50% 50% repeat-x; 
    font-weight: normal; 
    color: #555555; 
}

來源

2016-02-19 17:23:40 silviagreen

太棒了。這有幫助，但當我設置爲「高度：100％;」時，似乎無法獲得酒吧內的手柄。你知道預算的話，在如何讓它實際坐在範圍區域嗎？ – Paul

仍在工作，但似乎有問題與z-index有關。要移動預算詞必須添加到DIV + CSS規則左起：50％，然後你必須找到一種方法將其帶到前面 – silviagreen

這樣做似乎自動將預算案的字在50％大關自然。無論選擇哪個範圍，我都希望它處於範圍的中間。 – Paul

這是很容易看到所有使用的瀏覽器開發工具元素督察適用於任何元素在頁面上的規則。

你的規則是基於具有與像選擇特異性較高的現有規則不夠具體：

.ui-widget-content .ui-state-default 
/* and */ 
.ui-slider-horizontal .ui-slider-handle

一個簡單的方法，使更多的具體的一個實例是使用你的主窗口部件的ID在選擇器

#slider-range .ui-slider-handle

或更廣泛的達成使用....複製最具體的選擇和使用。在相同的選擇尾規則優先

來源

2016-02-19 17:26:33 charlietfl

謝謝。你是否知道我在我的問題中提到的「預算」一詞？ – Paul

這將需要在不同的元素。該插件填充所有的空目標選擇元素 – charlietfl

拼成的各種滑塊部分的內容你的意思只是一個不同的標識符，比如'

Budget

'如果是這種情況，那麼我怎麼能得到它與其中'UI關聯「滑行範圍」範圍目前是？或者我在那裏嵌套div？ – Paul

應用新的背景色jQuery的滑塊處理

回答

相關問題