如何爲滑塊賦予不同的背景顏色？

我想根據滑塊位置給出兩種不同顏色的滑塊顏色。一種顏色應該在滑塊之前，另一種顏色應該在滑塊之後。我使用css實現了其他設計。這裏是皮膚輸入的代碼[type = range]。如何爲滑塊賦予不同的背景顏色？

input[type=range]{ 
    border: 1px solid #4ba8b1; 
margin: 0px 0px 5px 5px; 
background:-webkit-gradient(linear,center top, center bottom, from(#CFDCDD),to(#DFE9EA),color-stop(50%,#DFE9EA)); 
float:left; 
pointer:cursor; 
-webkit-appearance:none; 
width:300px; 
height:5px; 
-webkit-border-radius:5px; 
-moz-border-radius:5px; 
} 
input[type=range]::-webkit-slider-thumb 
{ 
    -webkit-appearance:none; 
    border:1px solid #4ba8b1; 
    background:-webkit-gradient(linear,center top, center bottom,from(#CAE8E9),to(#E4ECEC),color-stop(50%,#9ED2D1)); 
    background:-moz-linear-gradient(top,#CAE8E9,#9ED2D1,#E4ECEC); 
    width:7px; 
    height:15px; 
    opacity:.7; 
}

和HTML是：

<input type="range" name="rangeEl" value="120" min="0" max="150" />

它使得輸出以及單背景色。現在我需要爲拇指之前的滑塊和拇指之後的另一種顏色提供顏色。幫我！

來源

2011-03-03 priya

這在目前的狀態太朦朧了。你可以重新說一點，以表明你想要什麼，你的問題到底是什麼？然而，滑塊控件無法在純CSS中運行 – 2011-03-03 08:55:56

我希望你現在能夠理解我的問題。 – priya 2011-03-03 11:59:44

我注意到你昨天問了一個similar question，然後我看了一下，但是並沒有真正計算出你想達到的目標。我有更多的時間思考這個問題並做一些研究並提供解決方案。

在css3wizardry上讚賞Robert Biggs的his post，從<div>標籤和prototype標籤構建滑塊和拇指的解決方案。但既然你想要一個HTML5的解決方案，我試圖對這個元素做同樣的事情。請致電demo。請注意，它使用jQuery events，但目前僅更新mousedown上的background-color。這是不正確初始化，也不會更新mousemove的顏色，而是認爲這將是一個很好的鍛鍊，以實現一個自己:)演示適用於Chrome 11和Safari 5

請仔細閱讀this comment和評論你之前關於樣式表單元素缺點的問題。

來源

2011-03-03 15:37:45 andyb

如何爲滑塊賦予不同的背景顏色？

回答

相關問題